ShouBo/webM/src/views/bottom/Use.vue

<template>
  <div class="UseC">
    <div class="ban" ref="ban">
      <img src="@/assets/img/bannerUse.png" alt="" />
      <h3>Terms of Use</h3>
    </div>
    <div class="main">
      <div class="box1">
        <h3>Terms of Use</h3>
        <div class="info">
          <span class="info_1">2018</span>
          <span class="info_3">Capital Museum</span>
        </div>
      </div>
      <div class="box2">
        <h3>Exhibition Overview</h3>
        <p>Legal Notice</p>
        <p>
          Welcome to www.capitalmuseum.org.cn (hereinafter referred to as "this
          website"). You are expected to comply with following terms while using
          this website:
        </p>
        <p>
          Copyright of all contents on this website, including but not limited
          to the website design, texts, pictures, audio and video works, etc.,
          belong to the Capital Museum and all the parties concerned. All media,
          websites, organizations or individuals are allowed to read these
          contents, but cannot use them in the ways including but not limited to
          reprinting, excerpting, linking, reposting, publication, transfer,
          distribution, etc. And unauthorized use of this website and its
          contents for commercial purposes is also prohibited.
        </p>
        <p>
          If you download materials you consider you need from this website for
          non-commercial use (except for information with copyrights and
          proprietary rights), please contact us for permission.
        </p>
        <p>
          Any reprints and quotes of any copyrighted articles on this website
          should conform to following requirements:
        </p>
        <p class="indexUrl">
          (1) For non-commercial, non-profit and non-advertising uses, author's
          name and source of the used article or picture, "首都博物馆网站" or
          "https://en.capitalmuseum.org.cn/#/Layout/Home", should be attached.
        </p>
        <p class="indexUrl">
          (2) For business, profit-making and advertising use, you should obtain
          consent of the original author, and attach the name of that author,
          limits of authority and the source, "首都博物馆网站"or
          "https://en.capitalmuseum.org.cn/#/Layout/Home".
        </p>
        <p>
          (3) Any modification and cancellation of any articles or pictures
          should be approved by the author, with the limits of authority
          attached.
        </p>
        <p>
          This website and the Capital Museum are not liable for any direct or
          indirect incidental damage resulting from the use or inability to use
          the information on this website. This website also does not assume any
          criminal or civil liability arising from any violation of the
          provisions of this website or the laws of the People's Republic of
          China.
        </p>
        <p>
          This website will make announcement in advance if services are to be
          suspended due to system maintenance or upgrading. The website and the
          Capital Museum are not be liable for any inconvenience or losses
          caused by the suspension of services due to hardware failure or force
          majeure.
        </p>
        <p>
          The right of final interpretation of all contents of this website is
          owned by the Capital Museum.
        </p>
        <p>
          To safeguard rights and interests of this website and respect for the
          authors' copyrights, we entrust Lyu Xiaojing of the Beijing Realizer
          Law Firm as the legal adviser to this website. Anyone violating the
          terms of this notice and laws will be held accountable. If any
          contents published and reposted on this website violate your
          copyrights, please contact our lawyer within two weeks.
        </p>
        <p>The Capital Museum</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UseC",
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.UseC {
  width: 100%;
  .ban {
    position: relative;
    width: 100%;
    & > img {
      width: 100%;
    }
    & > h3 {
      position: absolute;
      font-size: 24px;
      color: #fff;
      left: 20px;
      bottom: 20px;
      border-bottom: 1px solid #fff;
    }
  }
  .main {
    padding: 20px 20px 40px;
    background: url('../../assets/img/bgUse.png');
    background-size: 100% 100%;
    .box1 {
      padding: 0 15px 5px;
      border-bottom: 1px solid #ccc;
      & > h3 {
        font-size: 22px;
        font-weight: 700;
        padding-left: 30px;
        background: url("../../assets/img/Layout/chosen.png") left center
          no-repeat;
        background-size: 22px 18px;
        margin-bottom: 5px;
      }
      .info {
        font-size: 14px;
        line-height: 30px;
        color: #666;
        overflow: hidden;
        zoom: 1;
        margin-bottom: 20px;
        & > span {
          padding: 0 0px 0 30px;
          display: block;
        }
        .info_1 {
          background: url("../../assets/img/bg_5.png") 1px 5px no-repeat;
        }
        .info_3 {
          background: url("../../assets/img/bg_7.png") 3px 5px no-repeat;
        }
      }
    }
    .box2 {
      padding: 20px 15px 0;
      & > h3 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      &>p{
        font-size: 14px;
        line-height: 18px;
        color: #6A6A6A;
        margin-bottom: 15px;
      }
    }
  }
}
</style>