🆕 Added introduction page

src/components/More.vue

@@ -3,7 +3,7 @@
     <div class="more-container">
       <div class="triangle"/>
       <div class="more">
-        <div class="more-icon">
+        <div class="more-icon" @click="$router.push({name: 'intro'})">
           <img src="../assets/icon/intro.svg" alt="">
           <span>使用说明</span>
         </div>

src/pages/Introduction/IntroBody.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="intro-body">
+    <p class="title-words"> 行程卡+蓝牙 </p>
+    <div class="blue-tooth">
+      <img src="https://xc.caict.ac.cn/imgApp/yd-img_bluetooth%20.png" alt="">
+    </div>
+    <p class="body-words"> 通信行程卡手机APP版本中加入了蓝牙近距离接触提醒功能，如果和您近距离接触过的陌生人诊断为新冠肺炎确诊/疑似患者，使用我们的服务将更及时地提醒您注意健康观察。 </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IntroBody"
+}
+</script>
+
+<style scoped>
+.intro-body {
+  position: relative;
+}
+
+.intro-body .title-words {
+  color: black;
+  width: 100%;
+  left: 0;
+  position: relative;
+  top: 5vh;
+  font-size: 3.5vh;
+  margin-top: 13vh;
+}
+
+.blue-tooth {
+  position: relative;
+  align-items: center;
+  width: 100%;
+  top: 8vh;
+}
+
+.blue-tooth img {
+  width: 80vw;
+}
+
+.intro-body .body-words {
+  color: black;
+  left: 9vw;
+  width: 82vw;
+  font-size: 1.3vh;
+  line-height: 3.5vh;
+  top: 13vh;
+  position: relative;
+  text-align: justify;
+  margin-bottom: 12vh;
+}
+</style>

src/pages/Introduction/IntroCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+    <img :src="imgUrl" alt="">
+    <p class="card-num"> {{ num }}</p>
+    <p class="card-words"> {{ words }} </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IntroCard",
+  props: ["imgUrl", "num", "words"]
+}
+</script>
+
+<style scoped>
+
+.card {
+  border-radius: 13px;
+  width: 88vw;
+  position: relative;
+  height: 21vh;
+  background: white;
+  display: inline-block;
+  margin-bottom: 4vh;
+  box-shadow: 1px 7px 30px #cbcaca;
+}
+
+.card:first-of-type {
+  margin-top: 6vh;
+}
+
+.card:last-of-type {
+  height: 25vh;
+}
+
+.card img {
+  position: relative;
+  display: block;
+  left: 5vw;
+  top: 2vh;
+  height: 4vh !important;
+}
+
+.card .card-num {
+  top: 1vh;
+  font-size: 2.5vh;
+  display: block;
+  position: relative;
+  left: 5vw;
+  text-align: left;
+}
+
+.card .card-words {
+  position: relative;
+  text-align: left;
+  left: 5vw;
+  font-size: 1.3vh;
+  top: 0.5vh;
+  width: 90%;
+}
+
+</style>

src/pages/Introduction/IntroHeader.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="intro-header">
+    <div class="intro-logo">
+      <img src="https://xc.caict.ac.cn/imgApp/yd-img_logo.png" alt="">
+    </div>
+    <p class="title-words"> 通信行程卡 </p>
+    <p class="body-words"> "通信行程卡"是由工信部指导，中国信通院、中国电信、中国移动、中国联通共同推出的行程查询服务，可以免费为用户提供本人过往14天内到访过的国家(地区)和国内城市证明。 </p>
+    <AppDownloading/>
+    <div class="img-phones">
+      <img src="https://xc.caict.ac.cn/imgApp/yd-img_phones.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import AppDownloading from "@/pages/Introduction/appDownloading";
+export default {
+  name: "IntroHeader",
+  components: {AppDownloading}
+}
+</script>
+
+<style scoped>
+
+.intro-header {
+  background: rgb(59, 105, 236);
+  width: 100vw;
+  height: 78vh;
+  position: relative;
+  top: 10vh;
+}
+
+.intro-logo {
+  position: absolute;
+  top: 4vh;
+  left: 5vw;
+}
+
+.intro-logo img {
+  width: 40vw;
+}
+
+
+.title-words {
+  position: absolute;
+  left: 5vw;
+  font-size: 4vh;
+  margin-top: 13vh;
+  color: white;
+}
+
+.body-words {
+  position: absolute;
+  font-size: 1.3vh;
+  top: 19vh;
+  left: 5vw;
+  text-align: left;
+  width: 87.5vw;
+  color: white;
+}
+
+.img-phones {
+  position: absolute;
+  bottom: 2vh;
+  /* align-items: center; */
+  width: 100%;
+}
+
+.img-phones img {
+  height: 40vh;
+}
+
+/deep/ .app-downloading {
+  position: absolute !important;
+  top: 28vh !important;
+  left: 7vw !important;
+}
+
+</style>

src/pages/Introduction/IntroIndex.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <SubpageMainTitle main-title="使用指南"/>
+    <IntroHeader/>
+    <IntroBody/>
+    <div class="intro-principle">
+      <p class="title-words"> 行程卡2.0的工作原理 </p>
+      <IntroCard imgUrl="https://xc.caict.ac.cn/imgApp/yd-img_01.png" num="01."
+                 words="下载并安装通行行程卡APP"/>
+      <IntroCard imgUrl="https://xc.caict.ac.cn/imgApp/yd-img_02.png" num="02."
+                 words="当进入人员密集或流动性较大的场所时登录通信行程卡APP并按提示开启蓝牙"/>
+      <IntroCard imgUrl="https://xc.caict.ac.cn/imgApp/yd-img_03.png" num="03."
+                 words="如果近距离接触的双方都在使用行程卡服务，您与对方的手机将通过蓝牙交互记录下接触事件，接触的时间和距离将加密保存在各自手机中"/>
+      <IntroCard imgUrl="https://xc.caict.ac.cn/imgApp/yd-img_04.png" num="04."
+                 words="接触记录将在各自的手机中加密存储，如14天之内接触双方并无感染新冠肺炎，数据将自动清除"/>
+      <IntroCard imgUrl="https://xc.caict.ac.cn/imgApp/yd-img_05.png" num="05."
+                 words="如果用户被诊断为新冠肺炎确诊/疑似患者，在经患者同意后，他的加密ID将上传至服务端。您的手机会定期从服务端下载确诊/疑似患者的加密ID，并与手机中存储的接触记录进行比对，如果您的接触列表中有确诊/疑似患者，将在第一时间收到APP和短信提醒"/>
+    </div>
+    <IntroScense/>
+    <IntroReason/>
+    <div class="intro-bg">
+      <img src="../../assets/introBCK.png" alt="">
+    </div>
+    <AppDownloading/>
+    <Service :caift="caift" :telegram="telegram" :mobile="mobile" :unicom="unicom"/>
+  </div>
+</template>
+
+<script>
+import SubpageMainTitle from "@/components/SubpageMainTitle";
+import IntroCard from "@/pages/Introduction/IntroCard";
+import IntroScense from "@/pages/Introduction/IntroScense";
+import IntroHeader from "@/pages/Introduction/IntroHeader";
+import IntroBody from "@/pages/Introduction/IntroBody";
+import IntroReason from "@/pages/Introduction/IntroReason";
+import Service from "@/components/Footer/Service";
+import AppDownloading from "@/pages/Introduction/appDownloading";
+
+export default {
+  name: "IntroIndex",
+  components: {AppDownloading, Service, IntroReason, IntroBody, IntroHeader, IntroScense, IntroCard, SubpageMainTitle},
+  beforeCreate() {
+    document.querySelector('body').setAttribute('style', 'background: white')
+  },
+  data() {
+    return {
+      caift: "caift2.png",
+      mobile: "mobile2.png",
+      telegram: "telegram2.png",
+      unicom: "unicom2.png",
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.intro-principle {
+  background-color: #f5f5f5;
+  position: relative;
+  top: 5vh;
+}
+
+.intro-principle .title-words {
+  color: black;
+  left: 0;
+  /* display: inline-block; */
+  position: relative;
+  top: 7vh;
+  width: 100vw;
+  font-size: 3.5vh;
+}
+
+
+.intro-bg {
+  position: relative;
+  width: 100vw;
+  top: 9vh;
+}
+
+
+.intro-bg img {
+  width: 70vw;
+}
+
+
+/deep/ .service-container {
+  position: relative;
+  top: 12vh;
+  width: 100vw;
+  height: 10vh;
+  background: #f5f5f5;
+  left: 0;
+}
+
+/deep/ .service-container img {
+  position: relative;
+  top: 3vh;
+}
+
+/deep/ .app-downloading {
+  position: relative;
+  top: 13vh;
+   left: 0;
+  height: 11vh;
+}
+
+/deep/ .app-downloading img {
+  width: 35vw;
+}
+
+
+</style>

src/pages/Introduction/IntroReason.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="intro-reason">
+    <p class="title-words"> 为什么要使用行程卡? </p>
+    <div v-for="(url, idx) in urls" :key="idx" class="reason-img">
+      <img  :src="url" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IntroReason",
+  data() {
+    return {
+      urls: [
+          "https://xc.caict.ac.cn/imgApp/yd-img_crowd.png",
+          "https://xc.caict.ac.cn/imgApp/yd-img_privacy.png",
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.intro-reason .title-words {
+  color: black;
+  width: 100%;
+  left: 0;
+  position: relative;
+  top: 5vh;
+  font-size: 3.5vh;
+  margin-top: 3vh;
+}
+
+.reason-img {
+  position: relative;
+  margin-bottom: 1vh;
+}
+
+.reason-img img {
+  width: 86vw;
+}
+
+</style>