热点内容修改

src/components/hotspot/audio.vue

@@ -3,6 +3,15 @@
     <div class="title">{{ hotspot.hotspotTitle }}</div>
 
     <div class="img-con">
+
+      <img
+        @click="$emit('close')"
+        class="close"
+        :src="require('@/assets/images/pano/hotspot/cancel.png')"
+        alt=""
+      />
+      <!-- 关闭按钮 👆-->
+
       <p>{{ hotspot.introduce }}</p>
     </div>
 
@@ -210,11 +219,11 @@ export default {
 }
 
 .close {
-  position: absolute;
-  top: 40px;
-  right: 50px;
-  width: 20px;
-  height: 20px;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 26px;
+  height: 26px;
   cursor: pointer;
   z-index: 9999999;
 }

src/components/hotspot/image.vue

@@ -1,98 +1,119 @@
 <template>
-    <div class="images" >
-      <div class="img-con">
-        <span v-if="hotspot.image.length>1" @click="handlePage('prev')" >
-          <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="">
-        </span>
-        <img v-viewer :src="$serverName + hotspot.image[active].filePath" alt="">
-        <span v-if="hotspot.image.length>1" @click="handlePage('next')">
-          <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="">
-        </span>
-        <ul class="pagna" v-if="hotspot.image.length>1">
-          <li v-for="(item,i) in hotspot.image" :class="{active:i==active}" :key="i"></li>
-        </ul>
-      </div>
-        <div class="title" v-html="hotspot.hotspotTitle"></div>
-        <div class="desc" v-html="hotspot.introduce"></div>
-    </div>
-
-    
+  <div class="images">
+    <span
+      class="arrows"
+      v-if="hotspot.image.length > 1"
+      @click="handlePage('prev')"
+    >
+      <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="" />
+    </span>
+    <span
+      class="arrows"
+      v-if="hotspot.image.length > 1"
+      @click="handlePage('next')"
+    >
+      <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="" />
+    </span>
+    <!-- 左右箭头 👆 -->
 
+    <div class="img-con">
+      <img
+        @click="$emit('close')"
+        class="close"
+        :src="require('@/assets/images/pano/hotspot/cancel.png')"
+        alt=""
+      />
+      <!-- 关闭按钮 👆-->
+      
+      <img
+        v-viewer
+        :src="$serverName + hotspot.image[active].filePath"
+        alt=""
+      />
+      <ul class="pagna" v-if="hotspot.image.length > 1">
+        <li
+          v-for="(item, i) in hotspot.image"
+          :class="{ active: i == active }"
+          :key="i"
+        ></li>
+      </ul>
+    </div>
+    <div class="title" v-html="hotspot.hotspotTitle"></div>
+    <div class="desc" v-html="hotspot.introduce"></div>
+  </div>
 </template>
 
 <script>
-
 export default {
-
-  props:['hotspot'],
-  data(){
+  props: ["hotspot"],
+  data() {
     return {
-      active:0,
-      to:null,
-      mbactive:0
-    }
+      active: 0,
+      to: null,
+      mbactive: 0,
+    };
   },
-  watch:{
-    active(){
+  watch: {
+    active() {
       setTimeout(() => {
-          this.$showLoading();
+        this.$showLoading();
       });
 
       if (this.to) {
-        clearTimeout(this.to)
-        this.to = null
+        clearTimeout(this.to);
+        this.to = null;
       }
       this.to = setTimeout(() => {
         this.$hideLoading();
-      },100);
-    }
+      }, 100);
+    },
   },
-  beforeDestroy(){
-      this.$hideLoading();
+  beforeDestroy() {
+    this.$hideLoading();
   },
-  methods:{
-    handlePage(type){
-    if (type==='next') {
-      console.log(this.hotspot.image.length);
-      if (this.active>=this.hotspot.image.length - 1) {
-          this.active = 0
-          return
-      }
-      this.active += 1
-    }
-    else{
-      if (this.active==0) {
-          this.active = this.hotspot.image.length - 1
-          return
+  methods: {
+    handlePage(type) {
+      if (type === "next") {
+        console.log(this.hotspot.image.length);
+        if (this.active >= this.hotspot.image.length - 1) {
+          this.active = 0;
+          return;
+        }
+        this.active += 1;
+      } else {
+        if (this.active == 0) {
+          this.active = this.hotspot.image.length - 1;
+          return;
+        }
+        this.active -= 1;
       }
-      this.active -= 1
-    }
-    
-  },
-  },
-  computed:{
-   
+    },
   },
+  computed: {},
   mounted() {
     this.$showLoading();
     if (this.TO) {
-      clearTimeout(this.TO)
-      this.TO = null
+      clearTimeout(this.TO);
+      this.TO = null;
     }
     this.TO = setTimeout(() => {
       this.$hideLoading();
-    },800);
+    }, 800);
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
-.images{
+.images {
+  border-top: 10px solid #be1220;
+  border-bottom: 10px solid #be1220;
+  background: url("../../assets/images/pano/hotspot/bg.png");
+  background-size: 100% 100%;
   width: 1410px;
   height: 760px;
   text-align: center;
@@ -100,72 +121,74 @@ export default {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   border-radius: 5px;
   text-align: left;
   color: #fff;
-
-  .img-con{
+  .arrows {
+    display: inline-block;
+    padding: 0 30px;
+    box-sizing: content-box;
+    cursor: pointer;
+    position: absolute;
+    left: -140px;
+    top: 50%;
+    transform: translateY(-50%);
+    > img {
+      width: 50px;
+    }
+    &:last-of-type {
+      left: unset;
+      right: -140px;
+    }
+  }
+  .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
-    padding-bottom: 40px;
-    min-height: 70vh;
-    >span{
-      @juli:60px;
-      display: inline-block;
-      padding: 0 30px;
-      box-sizing: content-box;
-      cursor: pointer;
-      position: absolute;
-      left: @juli;
-      top: 50%;
-      transform: translateY(-50%);
-      >img{
-        width: 20px;
-      }
-      &:last-of-type{
-        left: unset;
-        right: @juli;
-      }
-    }
-    >img{
+    padding-bottom: 20px;
+    min-height: 60vh;
+    padding-top: 30px;
+    > img {
       max-width: 100%;
-      max-height: 520px;
+      max-height: 500px;
       cursor: pointer;
     }
-    .pagna{
+    .pagna {
       position: absolute;
       bottom: 0;
       text-align: center;
       z-index: 999;
-      >li{
-        width: 10px;
+      > li {
+        width: 8px;
         border-radius: 50%;
-        height: 10px;
-        background: rgba(51, 143, 123, .24);
+        height: 8px;
         display: inline-block;
-        margin: 0 4px;
-        &.active{
-          background: #338F7B;
+        margin: 0 5px;
+        background-color: #be1220;
+        opacity: .3;
+        &.active {
+          opacity: 1;
+          background-color: #be1220;
         }
       }
     }
   }
   .title {
+    color: #8b3c43;
     font-weight: bold;
-    font-size: 30px;
+    font-size: 20px;
     width: 100%;
     padding: 0 50px;
     margin-bottom: 10px;
     text-align: center;
   }
-.desc{
+  .desc {
+    color: #8b3c43;
     margin: 0 auto;
     width: 70%;
-    color: #fff;
-    text-align: justify;
+    text-align: center;
     line-height: 1.8;
     max-height: 120px;
     overflow-y: auto;
@@ -174,13 +197,13 @@ export default {
   }
 }
 
- .close{
-    position: fixed;
-    top: 40px;
-    right: 50px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    z-index: 9999999;
-  }
+.close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  z-index: 9999999;
+}
 </style>

src/components/hotspot/index.vue

@@ -1,21 +1,25 @@
 <template>
-  <div class="hotspotcon brightness" @click="closeAudio" >
-    <component @close='close' @click.native.stop :is="active" :hotspot="hotspot">
+  <div class="hotspotcon brightness" @click="closeAudio">
+    <component
+      @close="close"
+      @click.native.stop
+      :is="active"
+      :hotspot="hotspot"
+    >
     </component>
-    <img @click="close" class="close" :src="require('@/assets/images/pano/hotspot/cancel.png')" alt="">
+    <!-- <img @click="close" class="close" :src="require('@/assets/images/pano/hotspot/cancel.png')" alt=""> -->
   </div>
 </template>
 
 <script>
-import audio from './audio.vue';
-import image from './image.vue';
-import video from './video.vue';
-import title from './title.vue';
-import iframe from './iframe.vue';
-import model from './model.vue';
-
-import multiple from './multiple.vue';
+import audio from "./audio.vue";
+import image from "./image.vue";
+import video from "./video.vue";
+import title from "./title.vue";
+import iframe from "./iframe.vue";
+import model from "./model.vue";
 
+import multiple from "./multiple.vue";
 
 // let iconArr = [
 //   { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
@@ -27,40 +31,48 @@ import multiple from './multiple.vue';
 // ];
 
 export default {
-  components:{
-    vaudio:audio,
-    vimage:image,
-    viframe:iframe,
-    vmodel:model,
-    vtextarea:title,
-    vvideo:video,
-    vmultiple:multiple,
+  components: {
+    vaudio: audio,
+    vimage: image,
+    viframe: iframe,
+    vmodel: model,
+    vtextarea: title,
+    vvideo: video,
+    vmultiple: multiple,
   },
-  methods:{
-    closeAudio(){
-     if (this.active == 'vaudio') {
-        this.close()
+  methods: {
+    closeAudio() {
+      if (this.active == "vaudio") {
+        this.close();
       }
     },
-    close(){
-      this.$hideHotspot()
-      this.$bus.$emit('closeHP')
-    }
+    close() {
+      this.$hideHotspot();
+      this.$bus.$emit("closeHP");
+    },
   },
-  mounted(){
-    this.active = 'v' + this.hotspot.hotspotType
+  mounted() {
+    this.active = "v" + this.hotspot.hotspotType;
     console.log(this.cp);
+    // 隐藏顶部
+    window.parent.postMessage(
+      {
+        source: "closemenu",
+        data: true,
+      },
+      "*"
+    );
   },
-  data(){
+  data() {
     return {
-      active:'',
-    }
-  }
-}
+      active: "",
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.hotspotcon{
+.hotspotcon {
   position: fixed;
   z-index: 99999;
   width: 100%;
@@ -68,7 +80,7 @@ export default {
   left: 0;
   top: 0;
   color: #fff;
-  .close{
+  .close {
     position: fixed;
     top: 40px;
     right: 50px;
@@ -77,24 +89,24 @@ export default {
     cursor: pointer;
     z-index: 9999999;
   }
-  .ifrclose{
+  .ifrclose {
     top: 100px;
   }
 }
 
 @media only screen and (max-width: 487px) {
-.hotspotcon{
-  .close{
-    position: fixed;
-    top: unset;
-    right: unset;
-    bottom: 4%;
-    transform: translateX(-50%);
-    left: 50%;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
+  .hotspotcon {
+    .close {
+      position: fixed;
+      top: unset;
+      right: unset;
+      bottom: 4%;
+      transform: translateX(-50%);
+      left: 50%;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+    }
   }
 }
-}
 </style>

src/components/hotspot/model.vue

@@ -1,13 +1,30 @@
 <template>
   <div class="images">
-    <div class="img-con">
-      <span v-if="hotspot.modellink.length > 1" @click="handlePage('prev')">
-        <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="" />
-      </span>
+    <span
+      class="arrows"
+      v-if="hotspot.modellink.length > 1"
+      @click="handlePage('prev')"
+    >
+      <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="" />
+    </span>
+    <span
+      class="arrows"
+      v-if="hotspot.modellink.length > 1"
+      @click="handlePage('next')"
+    >
+      <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="" />
+    </span>
+    <!-- 左右箭头 👆 -->
+
+    <div class="img-con" :class="{full:!hotspot.hotspotTitle&&!hotspot.introduce}">
+      <img
+        @click="$emit('close')"
+        class="close"
+        :src="require('@/assets/images/pano/hotspot/cancel.png')"
+        alt=""
+      />
+      <!-- 关闭按钮 👆-->
       <iframe :src="hotspot.modellink[active]" frameborder="0"></iframe>
-      <span v-if="hotspot.modellink.length > 1" @click="handlePage('next')">
-        <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="" />
-      </span>
     </div>
     <div class="title" v-html="hotspot.hotspotTitle"></div>
     <div class="desc" v-html="hotspot.introduce"></div>
@@ -22,6 +39,8 @@ export default {
       active: 0,
       to: null,
       mbactive: 0,
+      hotspotTitle:'',
+      introduce:''
     };
   },
   watch: {
@@ -70,6 +89,10 @@ export default {
 }
 
 .images {
+  border-top: 10px solid #be1220;
+  border-bottom: 10px solid #be1220;
+  background: url("../../assets/images/pano/hotspot/bg.png");
+  background-size: 100% 100%;
   width: 1410px;
   height: 760px;
   text-align: center;
@@ -80,33 +103,30 @@ export default {
   transform: translate(-50%, -50%);
   border-radius: 5px;
   text-align: left;
-  color: #fff;
-
+  .arrows {
+    display: inline-block;
+    padding: 0 30px;
+    box-sizing: content-box;
+    cursor: pointer;
+    position: absolute;
+    left: -140px;
+    top: 50%;
+    transform: translateY(-50%);
+    > img {
+      width: 50px;
+    }
+    &:last-of-type {
+      left: unset;
+      right: -140px;
+    }
+  }
   .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
-    padding-bottom: 40px;
-    height: calc(100% - 130px);
-    > span {
-      @juli: 60px;
-      display: inline-block;
-      padding: 0 30px;
-      box-sizing: content-box;
-      cursor: pointer;
-      position: absolute;
-      left: @juli;
-      top: 50%;
-      transform: translateY(-50%);
-      > img {
-        width: 20px;
-      }
-      &:last-of-type {
-        left: unset;
-        right: @juli;
-      }
-    }
+    padding-bottom: 20px;
+    height: calc(100% - 170px);
     > iframe {
       width: 100%;
       height: 100%;
@@ -117,31 +137,38 @@ export default {
       text-align: center;
       z-index: 999;
       > li {
-        width: 10px;
+        width: 8px;
         border-radius: 50%;
-        height: 10px;
-        background: rgba(51, 143, 123, 0.24);
+        height: 8px;
         display: inline-block;
-        margin: 0 4px;
+        margin: 0 5px;
+        background-color: #be1220;
+        opacity: .3;
         &.active {
-          background: #338f7b;
+          opacity: 1;
+          background-color: #be1220;
         }
       }
     }
   }
+  .full{
+    height: 100%;
+    padding-bottom: 0;
+  }
   .title {
+    color: #8b3c43;
     font-weight: bold;
-    font-size: 30px;
+    font-size: 20px;
     width: 100%;
     padding: 0 50px;
     margin-bottom: 10px;
     text-align: center;
   }
   .desc {
+    color: #8b3c43;
     margin: 0 auto;
     width: 70%;
-    color: #fff;
-    text-align: justify;
+    text-align: center;
     line-height: 1.8;
     max-height: 120px;
     overflow-y: auto;
@@ -152,10 +179,10 @@ export default {
 
 .close {
   position: fixed;
-  top: 40px;
+  top: 20px;
   right: 50px;
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
   cursor: pointer;
   z-index: 9999999;
 }

src/components/hotspot/title.vue

@@ -1,76 +1,73 @@
 <template>
   <div class="donate" @click.stop>
-    <p class="qtitle">{{hotspot.hotspotTitle}}</p>
-    <div class="qline">
-    </div>
+    <img
+      @click="$emit('close')"
+      class="close"
+      :src="require('@/assets/images/pano/hotspot/cancel.png')"
+      alt=""
+    />
+    <!-- 关闭按钮 👆-->
+
+    <p class="qtitle">{{ hotspot.hotspotTitle }}</p>
     <div class="txtcon">
       <p v-html="hotspot.introduce"></p>
       <p v-html="hotspot.textarea"></p>
     </div>
-   
   </div>
 </template>
 
 <script>
-
 export default {
-  props:['hotspot'],
+  props: ["hotspot"],
 };
 </script>
 
 <style lang="less" scoped>
 .donate {
-  width: 988px;
+  border-top: 10px solid #be1220;
+  border-bottom: 10px solid #be1220;
+  background: url("../../assets/images/pano/hotspot/bg.png");
+  background-size: 100% 100%;
+  width: 1410px;
+  height: 760px;
+  text-align: center;
   margin: 0 auto;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 99;
-  background-color: rgba(255, 255, 255, 0.5);
-  color: #fff;
-  padding: 36px 34px;
-  border-top: 8px solid #ccaf8f;
-  border-bottom: 8px solid #ccaf8f;
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  background-size: 100% auto;
+  border-radius: 5px;
+  text-align: left;
+  color: #8b3c43;
   .qtitle {
     width: 100%;
-    height: 30px;
-    font-size: 30px;
+    height: 80px;
+    font-size: 20px;
     font-weight: bold;
-    line-height: 38px;
+    line-height: 80px;
     text-align: center;
+    border-bottom: 2px solid #BE1220;
   }
-  .qline {
-    width: 100%;
-    height: 1px;
-    margin: 26px 0;
-    position: relative;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%);
-    > img {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 32px;
-      top: -12px;
-    }
-  }
-
-  .txtcon{
-    background-color: rgba(255, 255, 255, 0.7);
-    padding: 20px;
-    color: #626260;
-    p{
-      font-size: 18px;
+  .txtcon {
+    margin-top: 60px;
+    width: calc(100% - 50px);
+    height: 540px;
+    overflow-y: auto;
+    padding: 0px 100px 0px 150px;
+    color: #8B3C43;
+    p {
+      font-size: 16px;
       line-height: 1.5;
     }
   }
-
-
-
-
-
+  .close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  z-index: 9999999;
+}
 }
 </style>

src/components/hotspot/video.vue

@@ -1,22 +1,37 @@
 <template>
   <div class="images">
+    <span class="arrows" @click="active -= 1" :class="{ noshow: active <= 0 }">
+      <img :src="require('@/assets/images/pano/hotspot/left.png')" alt="" />
+    </span>
+    <span
+      class="arrows"
+      @click="active += 1"
+      :class="{ noshow: active >= hotspot.video.length - 1 }"
+    >
+      <img :src="require('@/assets/images/pano/hotspot/right.png')" alt="" />
+    </span>
+    <!-- 左右箭头 👆 -->
+
     <div class="img-con">
-      <span @click="active -= 1" :class="{ noshow: active <= 0 }">上一张</span>
-      <video controlslist="nodownload noremoteplayback"
-              disablePictureInPicture
-              controls
-              autoplay
-              v-show="isvideoshow"
-              @canplaythrough="isvideoshow = true"
-              @canplay="isvideoshow = true">
+      <img
+        @click="$emit('close')"
+        class="close"
+        :src="require('@/assets/images/pano/hotspot/cancel.png')"
+        alt=""
+      />
+      <!-- 关闭按钮 👆-->
+      <video
+        controlslist="nodownload noremoteplayback"
+        disablePictureInPicture
+        controls
+        autoplay
+        v-show="isvideoshow"
+        @canplaythrough="isvideoshow = true"
+        @canplay="isvideoshow = true"
+      >
         <source :src="hotspot.video[active].filePath" type="video/mp4" />
       </video>
-      <span
-        @click="active += 1"
-        :class="{ noshow: active >= hotspot.video.length - 1 }"
-        >下一张</span
-      >
-      <ul class="pagna" v-if="hotspot.video.length>1">
+      <ul class="pagna" v-if="hotspot.video.length > 1">
         <li
           v-for="(item, i) in hotspot.video"
           :class="{ active: i == active }"
@@ -27,50 +42,51 @@
     <div class="title" v-html="hotspot.hotspotTitle"></div>
     <div class="desc" v-html="hotspot.introduce"></div>
   </div>
- 
 </template>
 
 <script>
-
 export default {
   props: ["hotspot"],
   data() {
     return {
       active: 0,
-      isvideoshow:false,
-      TO:null
+      isvideoshow: false,
+      TO: null,
     };
   },
-  watch:{
-    isvideoshow:{
-      handler:function (newVal){
+  watch: {
+    isvideoshow: {
+      handler: function (newVal) {
         if (newVal) {
           this.$hideLoading();
         }
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.$showLoading();
-       if (this.TO) {
-        clearTimeout(this.TO)
-        this.TO = null
-      }
-      this.TO = setTimeout(() => {
-        this.$hideLoading();
-      },10*1000);
+    if (this.TO) {
+      clearTimeout(this.TO);
+      this.TO = null;
+    }
+    this.TO = setTimeout(() => {
+      this.$hideLoading();
+    }, 10 * 1000);
   },
- 
 };
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
-.images{
+.images {
+  border-top: 10px solid #be1220;
+  border-bottom: 10px solid #be1220;
+  background: url("../../assets/images/pano/hotspot/bg.png");
+  background-size: 100% 100%;
   width: 1410px;
   height: 760px;
   text-align: center;
@@ -78,87 +94,88 @@ export default {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   border-radius: 5px;
   text-align: left;
-
-  .img-con{
+  .arrows {
+    display: inline-block;
+    padding: 0 30px;
+    box-sizing: content-box;
+    cursor: pointer;
+    position: absolute;
+    left: -140px;
+    top: 50%;
+    transform: translateY(-50%);
+    > img {
+      width: 50px;
+    }
+    &:last-of-type {
+      left: unset;
+      right: -140px;
+    }
+  }
+  .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
-    padding-bottom: 40px;
-    >span{
-      @juli:60px;
-      display: inline-block;
-      padding: 0 30px;
-      box-sizing: content-box;
-      cursor: pointer;
-      position: absolute;
-      left: @juli;
-      top: 50%;
-      transform: translateY(-50%);
-      >img{
-        width: 20px;
-      }
-      &:last-of-type{
-        left: unset;
-        right: @juli;
-      }
-    }
-    >video{
+    padding-bottom: 20px;
+    min-height: 60vh;
+    padding-top: 30px;
+    > video {
       max-width: 100%;
-      max-height: 520px;
+      max-height: 500px;
       cursor: pointer;
-      margin-top: 50px;
     }
-    .pagna{
+    .pagna {
       position: absolute;
       bottom: 0;
       text-align: center;
       z-index: 999;
-      >li{
-        width: 10px;
+      > li {
+        width: 8px;
         border-radius: 50%;
-        height: 10px;
-        background: rgba(51, 143, 123, .24);
+        height: 8px;
         display: inline-block;
-        margin: 0 4px;
-        &.active{
-          background: #338F7B;
-        
+        margin: 0 5px;
+        background-color: #be1220;
+        opacity: 0.3;
+        &.active {
+          opacity: 1;
+          background-color: #be1220;
         }
       }
     }
   }
-.title {
+  .title {
+    color: #8b3c43;
     font-weight: bold;
-    font-size: 30px;
-    text-align: center;
+    font-size: 20px;
     width: 100%;
     padding: 0 50px;
     margin-bottom: 10px;
+    text-align: center;
   }
-    .desc{
+  .desc {
+    color: #8b3c43;
     margin: 0 auto;
     width: 70%;
-    color: #fff;
-    text-align: justify;
+    text-align: center;
     line-height: 1.8;
     max-height: 120px;
     overflow-y: auto;
     font-size: 16px;
-    padding: 0;
+    padding-right: 10px;
   }
 }
 
- .close{
-    position: absolute;
-    top: 40px;
-    right: 50px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    z-index: 9999999;
-  }
+.close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  z-index: 9999999;
+}
 </style>

src/views/layout/index.vue

@@ -121,7 +121,7 @@ export default {
   .lay_top_hide {
     display: block;
     cursor: pointer;
-    position: fixed;
+    position: absolute;
     top: 0px;
     left: 100px;
     z-index: 98;