1

src/pages/index.vue

@@ -19,9 +19,11 @@
         class="block"
         @click="goDetails(index)"
       >
-        <span class="money">{{ item.valuable / 100 }}</span>
-        <span class="content">{{ item.content }}</span
-        ><span class="ck">详情</span>
+       <div class="money">{{ item.content }}</div>
+       <!-- {{ item.content }} -->
+        <div class="money">￥{{ item.valuable / 100 }}</div>
+        
+        <!-- <span class="ck">详情</span> -->
       </div>
       <!-- </el-radio> -->
       <!-- </el-radio-group> -->
@@ -66,13 +68,10 @@ export default {
     goDetails(index) {
       console.log(index);
       this.$router.push({
-        name: "payDetails",
+        path: "/payDetails",
         query: {
-          index: index,
-          // contentImg: item.contentImg,
-          // valuable: item.valuable,
-          // title: item.title,
-        },
+          index: index
+        }
       });
     },
     // radioChange: (val) => {
@@ -191,38 +190,48 @@ export default {
 //   justify-content: center;
 // }
 .block {
-  margin-top: 6%;
-  position: relative;
-  width: 100%;
-  background: #feb800;
-  overflow: hidden;
-  height: 28%;
+  // margin-top: 6%;
+  // position: relative;
+  width: 25%;
+  background: #e4d091;
+  margin-left: 6%;
+  // overflow: hidden;
+  height: 100%;
   // border: 1px solid red;
+  text-align: center;
 }
 .money {
-  display: flex;
-  align-items: center;
-  left: 20px;
-  background: #1c1817;
-  padding: 0 12px;
+  width: 100%;
+  height: 50%;
+  // display: flex;
+  // align-items: center;
+  // left: 20px;
+  // background: #1c1817;
+  // padding: 0 12px;
   font-weight: 900;
-  font-size: 21px;
-  color: #fec629;
-  position: absolute;
-  bottom: 0;
-  height: 80%;
+  font-size: 19px;
+  color: #00494f;
+  text-align: center;
+  display: flex;
+  align-items:center;
+  justify-content: center;
+  // position: absolute;
+  // bottom: 0;
+  // height: 80%;
 }
 .el-image {
   display: block;
 }
 .area {
   // display: flex;
-  width: 80%;
+  width: 100%;
   position: absolute;
-  top: 38%;
-  left: 10%;
-  height: 30%;
-  // border: 1px solid red;
+  top: 61%;
+  left: 0%;
+  height: 10%;
+  // border: 1px solid yellow;
+  display: flex;
+  // justify-content:center;
 }
 // .el-radio-group .el-radio {
 //   display: block;
@@ -232,19 +241,19 @@ export default {
 //   margin-top: 11%;
 //   margin-left: 10px;
 // }
-.content {
-  position: absolute;
-  top: 18%;
-  left: 38%;
-  font-size: 16px;
-  font-weight: 600;
-  width: 55%;
-  word-break: break-all;
-  white-space: normal;
-  color: #fff;
-  // border:1px solid red
-  // border: 1px solid red;
-}
+// .content {
+//   position: absolute;
+//   top: 18%;
+//   left: 38%;
+//   font-size: 16px;
+//   font-weight: 600;
+//   width: 55%;
+//   word-break: break-all;
+//   white-space: normal;
+//   color: #fff;
+//   // border:1px solid red
+//   // border: 1px solid red;
+// }
 
 // .el-radio-group
 //   .el-radio
@@ -318,18 +327,18 @@ export default {
 //     }
 //   }
 // }
-.ck {
-  font-size: 13px;
-  margin-top: 11px;
-  background: #1f1619;
-  color: #feb800;
-  float: right;
-  padding: 5px 12px;
-  font-weight: 900;
-  position: absolute;
-  bottom: 5%;
-  right: 2%;
-}
+// .ck {
+//   font-size: 13px;
+//   margin-top: 11px;
+//   background: #1f1619;
+//   color: #feb800;
+//   float: right;
+//   padding: 5px 12px;
+//   font-weight: 900;
+//   position: absolute;
+//   bottom: 5%;
+//   right: 2%;
+// }
 // .xy {
 //   font-size: 13px;
 //   color: #fff;

src/pages/payDetails.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <el-image style="width: 100%" :src="contentImg" fit="contain"></el-image>
+    <!-- <div class="back_area"><span><</span>返回首页</div> -->
     <div class="pay_area">
       <div class="btn" @click="pay">￥{{ valuable / 100 }} 立即购买</div>
       <div style="display: flex; justify-content: center">
@@ -117,9 +118,9 @@ export default {
   mounted() {
     this.currentIndex = this.$route.query.index;
     openId.getOpenId(() => {
-      let openId = window.localStorage.getItem("openId");
-      // let openId = "oyp646WEKT5tK5AgiEhYrtW7pmq8";
-      this.findArr(openId);
+    let openId = window.localStorage.getItem("openId");
+    // let openId = "oyp646WEKT5tK5AgiEhYrtW7pmq8";
+    this.findArr(openId);
     });
     // this.contentImg = this.$route.query.contentImg;
     // this.valuable = this.$route.query.valuable;
@@ -128,6 +129,14 @@ export default {
 };
 </script>
 <style scoped lang="less">
+.back_area {
+  height: 50px;
+  border: 1px solid red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #fff;
+}
 .pay_area {
   width: 100%;
   height: 88px;

src/pages/payList.vue

@@ -47,6 +47,7 @@ export default {
   computed: {},
   async mounted() {
     openId.getOpenId(() => {
+      // let openId='oyp646XW37eIqrv3XisVWQ3xq3BQ'
       let openId = window.localStorage.getItem("openId");
       this.findArr(openId);
     });