封面

src/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Honghe from './components/Honghe.vue'
+import Honghe from './pages/Honghe.vue'
 
 export default {
   name: 'App',

src/components/ImageTrans.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="card-wrapper">
-    <div :class="`card ${classDivAA?'flipped':''}`" @click="transform">
-      <div class="back">
-        <img src="../assets/popupImg/popuBody.jpg" alt />
-      </div>
-      <div class="front">
-        <img src="../assets/popupImg/backImag.jpg" alt />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ImageTrans',
-  props: {
-    classDiv: {
-      type: Boolean
-    }
-  },
-  data() {
-    return {
-      classDivAA: false
-    }
-  },
-
-  mounted() {
-    if (this.classDiv) {
-      this.transform()
-    }
-  },
-  methods: {
-    transform() {
-      // this.classDiv = true
-      console.log(
-        '🚀 ~ file: ImageTrans.vue ~ line 34 ~ transform ~  this.classDiv',
-        // this.classDiv
-        setTimeout(() => {
-          this.classDivAA = true
-        }, 0)
-      )
-    }
-  }
-}
-</script>
-
-<style scoped>
-.card-wrapper {
-  perspective: 600px;
-}
-
-img {
-  width: 48vw;
-}
-.card {
-  position: relative;
-  width: 320px;
-  height: 320px;
-  margin: 200px auto;
-  color: #fff;
-  font-size: 3em;
-  text-align: center;
-  line-height: 320px;
-  box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);
-  transform-style: preserve-3d;
-  transition: all 0.8s ease;
-}
-
-.card > div {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* 背面不显示 */
-  backface-visibility: hidden;
-}
-
-.flipped {
-  transform: rotateY(180deg);
-}
-
-.card .front {
-}
-
-.card .back {
-  transform: rotateY(180deg);
-}
-</style>

src/components/Popup.vue

@@ -10,7 +10,6 @@
             <div class="card-wrapper">
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
                 <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
-                <!-- <ImageTrans :classDiv="show" /> -->
                 <div class="back">
                   <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt />
                 </div>
@@ -54,9 +53,7 @@
 <script>
 export default {
   name: 'Popup',
-  components: {
-    ImageTrans: () => import('@/components/ImageTrans.vue')
-  },
+
   props: {
     show: {
       type: Boolean,

src/components/SaveShare.vue

@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div v-if="item==0">
-        <h1>未中奖</h1>
-      </div>
-      <div v-else>
-        <h1>中奖页面</h1>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-
-  data() {
-    return {
-      item: null
-    }
-  },
-
-  watch: {
-    '$route.query.states': {
-      handler(val) {
-        console.log('🚀 ~ file: SaveShare.vue ~ line 24 ~ val', val)
-
-        if (val) {
-          this.item = val
-        } else {
-          this.$router.go(-1)
-        }
-      },
-      immediate: true // 页面加载时就启动
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/pages/SaveShare.vue

@@ -0,0 +1,134 @@
+<template>
+  <div style="background-color:#c1172d; height:100vh; width:100%;">
+    <div
+      class="backhome"
+      :style="`background:url('${backimg}');background-size: 100% auto;`"
+      @click="()=>{}"
+    ></div>
+
+    <div>
+      <div v-if="item==0">
+        <!-- 领取屏保 -->
+        <div class="outer3 flex-col">
+          <div class="haibao">
+            <img class="haibao" src="../assets/saverShaerImg/haibao.jpg" alt />
+          </div>
+          <div class="mod2 flex-col">
+            <div class="block1 flex-col">
+              <div class="section1 flex-col" :style="`background-image: url(${shaerBut});`"></div>
+              <span :style="`background-image: url(${pressImage});`" class="info2"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <!-- 挂历 -->
+        <div class="main5 flex-col" :style="`background-image: url(${shaerButRed});`"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+
+  data() {
+    return {
+      item: null,
+      backimg: require('../assets/saverShaerImg/back.png'),
+      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
+      pressImage: require('../assets/saverShaerImg/PressImage.png'),
+      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png')
+    }
+  },
+
+  watch: {
+    '$route.query.states': {
+      handler(val) {
+        console.log('🚀 ~ file: SaveShare.vue ~ line 24 ~ val', val)
+
+        if (val) {
+          this.item = val
+        } else {
+          this.$router.go(-1)
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  }
+}
+</script>
+
+<style lang="less" scoper>
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.backhome {
+  width: 75px;
+  height: 42px;
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  z-index: 19;
+  background-repeat: no-repeat;
+}
+.outer3 {
+  width: 100vw;
+  height: 100vh;
+  justify-content: flex-end;
+  .haibao {
+    width: 100vw;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .mod2 {
+    z-index: 35;
+    height: 210px;
+    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
+    width: 100vw;
+    justify-content: flex-end;
+    padding-bottom: 33px;
+    align-items: center;
+    .block1 {
+      width: 180px;
+      height: 113px;
+      .section1 {
+        height: 48px;
+        border-radius: 8px;
+        background-size: 100% auto;
+        background-color: #fff;
+        width: 180px;
+        justify-content: center;
+        align-items: center;
+        border: 0;
+      }
+      .info2 {
+        width: 152px;
+        height: 54px;
+        display: block;
+        color: #fff;
+        text-align: center;
+        align-self: center;
+        margin-top: 12px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+}
+
+.main5 {
+  height: 48px;
+  border-radius: 8px;
+  margin-top: 11px;
+  width: 343px;
+  background-color: #c1172d;
+  border: 0;
+  position: fixed;
+  z-index: 15;
+  bottom: 5vh;
+}
+</style>

src/router/index.js

@@ -2,8 +2,8 @@
 
 import Vue from 'vue'
 import Router from 'vue-router'
-import Honghe from '@/components/Honghe'
-import SaveShare from '@/components/SaveShare'
+import Honghe from '../pages/Honghe.vue'
+import SaveShare from '../pages/SaveShare.vue'
 // import Login from '@/Login.vue'
 
 Vue.use(Router)
@@ -12,12 +12,7 @@ export default new Router({
 
 
   routes: [
-    //Loading
-    // {
-    //   path: '/',
-    //   name: 'Login',
-    //   component: Login
-    // },
+
     //面页
     {
       path: '/',