修改首页样式

src/router/routes.js

@@ -6,7 +6,7 @@ const routes = [
   {
     path: '/Index',
     name: 'Index',
-    component: resolve => require(['@/views/Home'], resolve)
+    component: resolve => require(['@/views/Home/new_index.vue'], resolve)
   },
   {
     path: '/pay',

src/views/Home/new_index.vue

+<template>
+  <div class="home">
+    <div class="blind_box_pay_header"
+         :style="'padding-top: 7.54rem;position:relative;width: 100%;background-repeat: no-repeat;background-color: #ff7989;justify-content: center; background-size:contain;background-image:url('+require('@/assets/img/index/WechatIMG3667.jpeg')+');'">
+      <img style="position: fixed;
+        top: 0.42rem;
+        right: 0;
+        width: 0.38rem;"
+        src="@/assets/img/index/WechatIMG3666.png"
+        @click="showRule"
+        alt="">
+      <div>
+        <img class="left_img animation_class"
+             src="@/assets/img/index/WechatIMG3668.png"
+             alt="">
+        <img class="right_img animation_class"
+             src="@/assets/img/index/WechatIMG3669.png"
+             alt="">
+      </div>
+      <div :style="'padding-top: 1.57rem;position:relative;width: 7.5rem;height: 6.99rem;background-repeat: no-repeat;justify-content: center; background-size:contain;background-image:url('+require('@/assets/img/index/WechatIMG3680.png')+');'">
+        <img class="input_area_icon_left animation_class"
+             src="@/assets/img/index/WechatIMG3685.png"
+             alt="">
+        <img class="input_area_icon_right animation_class"
+             src="@/assets/img/index/WechatIMG3685.png"
+             alt="">
+        <img class="input_area_img animation_rotate_class"
+             src="@/assets/img/index/WechatIMG3682.png"
+             alt="">
+        <div class="input-area">
+          <div class="input_area_box">
+            <img src="@/assets/img/index/WechatIMG3641.png"
+                 alt="">
+            <input type="text"
+                   placeholder="请输入男方姓名"
+                   v-model="manName">
+          </div>
+          <div class="input_area_box">
+            <img src="@/assets/img/index/WechatIMG3642.png"
+                 alt="">
+            <input type="text"
+                   placeholder="请输入女方姓名"
+                   v-model="womName">
+          </div>
+          <div class="input_area_btn animation_scale_class">
+            <img style="width:100%;"
+                 src="@/assets/img/index/WechatIMG3640.png"
+                 alt="">
+          </div>
+          <p data-v-5b831c31=""
+             class="text-class">已有<span data-v-5b831c31=""
+                  class="color_">898436人</span>完成配对，并参与了领<span data-v-5b831c31=""
+                  class="color_">iphone13</span>活动</p>
+          <label class="read_message_xiaoxiang_area"
+                 style="color:#999999;">
+            <input type="checkbox"
+                   v-model="agreeAdvice">
+            同意保护 <a href="https://newspool.zhangxinhulian.com/sspapiNovel/su/custom/cesuan/private.html">《隐私协议》</a>
+            <span class=""
+                  @click="agreePage">
+              <!-- <a :href="privacyHtml">
+              《个人信息授权及保护声明》
+            </a> -->
+            </span>
+          </label>
+        </div>
+        <div style="text-align:center;color: rgb(251, 236, 123);font-size:14px;margin-top:36px;">
+          <p style="margin:4px 0;">北京掌驰文化传媒有限公司</p>
+          <p style="margin:4px 0;">经营范围：信息咨询服务</p>
+        </div>
+      </div>
+    </div>
+    <div
+      style="width:100vw;height:100vh;position:fixed;left:0;top:0;background-color: rgba(0,0,0,.7);"
+           v-show="showRuleArea">
+      <div
+           tabindex="0"
+           class="van-dialog"
+           style="z-index: 2002;"
+           aria-labelledby="活动规则">
+        <div class="van-dialog__header">活动规则</div>
+        <div class="van-dialog__content">
+          <div class="van-dialog__message van-dialog__message--has-title van-dialog__message--left">
+            <p style="margin:0;">1、活动时间:即日起至2023年6月30日；</p> 
+            <p style="margin:0;">2、凡付费购买姓名配对的用户，若速配指数是99(含99）以上的用户凭测算的订单号联系客服，可免费领取iphone13一台；</p> 
+            <p style="margin:0;">3、速配指数以领到的姓名配对测试报告结果页中的匹配契合度分值为准；</p> 
+            <p style="margin:0;">4、活动中奖率：1/9999，符合领取条件的用户，结果页会自动出现客服联系方式，每个用户活动期间限制免费领取一台；</p>
+          </div>
+        </div>
+        <div class="van-hairline--top van-dialog__footer">
+          <button @click="hideWarn" type="button"
+                  class="van-button van-button--default van-button--large van-dialog__confirm">
+            <div class="van-button__content">
+              <span style="color: #fb5264;" class="van-button__text">确认</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatusBar from "@/components/StatusBar";
+import AccrodWithName from "./child_cpn/AccordWithName";
+import utils from "@/utils";
+import API from "@/service/api";
+
+export default {
+  data () {
+    return {
+      agreeAdvice: true,
+      manName: '',
+      womName: '',
+      showRuleArea: false,
+    }
+  },
+  components: {
+    StatusBar,
+    AccrodWithName,
+  },
+
+  mounted () {
+    let h5LogsObj = utils.getUrlParams();
+    let link = encodeURIComponent(window.location.href);
+
+    utils.setCookie("h5LogsObj", encodeURI(JSON.stringify(h5LogsObj)), 0);
+    utils.setCookie("link", encodeURI(link), 0);
+
+    API.API_reportView("home_page_view");
+  },
+
+  methods: {
+    showRule () {
+      this.showRuleArea = true;
+    },
+    hideWarn () {
+      this.showRuleArea = false;
+    },
+    agreePage(){
+      this.agreeAdvice = !this.agreeAdvice;
+    },
+    begin () {
+      if (this.$refs.accord.male == "" || this.$refs.accord.female == "") {
+        window.scrollTo(0, window.screen.height / 2);
+        return;
+      } else {
+        let params = {
+          info: [
+            { gender: 1, name: this.$refs.accord.male },
+            { gender: 0, name: this.$refs.accord.female },
+          ],
+        };
+
+        this.$router.push({ path: "/pay", query: params });
+      }
+    },
+  },
+};
+</script>
+
+<style>
+  .van-dialog {
+    
+    position: fixed;
+    top: 45%;
+    left: 50%;
+    width: 320px;
+    overflow: hidden;
+    font-size: 16px;
+    background-color: #fff;
+    border-radius: 16px;
+    -webkit-transform: translate3d(-50%,-50%,0);
+    transform: translate3d(-50%,-50%,0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: .3s;
+    transition: .3s;
+    -webkit-transition-property: opacity,-webkit-transform;
+    transition-property: opacity,-webkit-transform;
+    transition-property: transform,opacity;
+    transition-property: transform,opacity,-webkit-transform;
+}
+.van-dialog__header {
+    padding-top: 26px;
+    font-weight: 500;
+    line-height: 24px;
+    text-align: center;
+}
+.van-dialog__footer {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    overflow: hidden;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.van-dialog__message--left {
+    text-align: left;
+}
+.van-dialog__message--has-title {
+    padding-top: 8px;
+    color: #646566;
+}
+.van-dialog__message {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    max-height: 60vh;
+    padding: 26px 24px;
+    overflow-y: auto;
+    font-size: 14px;
+    line-height: 26px;
+    text-align: left;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
+}
+.van-dialog__confirm, .van-dialog__confirm:active {
+    color: #ee0a24;
+}
+
+.van-dialog__cancel, .van-dialog__confirm {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    height: 48px;
+    margin: 0;
+    border: 0;
+}
+.van-button--large {
+    width: 100%;
+    height: 50px;
+}
+.van-button--default {
+    color: #323233;
+    background-color: #fff;
+    border: 1px solid #ebedf0;
+}
+.van-button {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    height: 44px;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    line-height: 1.2;
+    text-align: center;
+    border-radius: 2px;
+    cursor: pointer;
+    -webkit-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-appearance: none;
+}
+.color_ {
+  color: #fb5264;
+}
+.left_img {
+  position: absolute;
+  left: 0.24rem;
+  top: 4.4rem;
+  display: inline-block;
+  width: 2.09rem;
+}
+.right_img {
+  position: absolute;
+  right: 0.3rem;
+  top: 3.76rem;
+  display: inline-block;
+  width: 2.19rem;
+}
+.input_area_icon_left {
+  position: absolute;
+  left: 0.61rem;
+  top: 0.83rem;
+  display: inline-block;
+  width: 0.15rem;
+}
+.input_area_icon_right {
+  position: absolute;
+  right: 0.59rem;
+  top: 0.83rem;
+  display: inline-block;
+  width: 0.15rem;
+}
+.input_area_box {
+  display: flex;
+  width: 6.16rem;
+  height: 0.86rem;
+  background: #fff;
+  border: 0.02rem solid #fed2f8;
+  border-radius: 0.1rem;
+  margin: auto;
+  margin-bottom: 0.33rem;
+}
+.input_area_btn {
+  width: 6.27rem;
+  height: 1.04rem;
+  margin: auto;
+  margin-top: 0.43rem;
+}
+.text-class {
+  text-align: center;
+  font-size: 0.26rem;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #9c6c7f;
+  margin: 0;
+  margin-top: 0.4rem;
+}
+.input_area_box input {
+  border: 0;
+  font-size: 16px;
+  padding-left: 16px;
+  width: 100%;
+}
+.input_area_box img {
+  width: 0.88rem;
+  height: 0.86rem;
+}
+.animation_class {
+  animation-name: upAndDownMove;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+.animation_rotate_class {
+  animation-name: rotateAnimate;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+.animation_scale_class {
+  animation-name: scaleAnimate;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+.input_area_img {
+  position: absolute;
+  right: 0.86rem;
+  top: 0.42rem;
+  display: inline-block;
+  width: 0.92rem;
+}
+.read_message_xiaoxiang_area {
+  display: flex;
+  align-items: center;
+  letter-spacing: 1px;
+  font-size: 13px;
+  flex-wrap: wrap;
+  justify-content: center;
+  -webkit-box-align: center;
+}
+.read_message_xiaoxiang_area input {
+  margin-right: 5px;
+}
+.read_message_xiaoxiang_area span {
+  color: #9c6c7f;
+}
+.read_message_xiaoxiang_area a {
+  color: #9c6c7f;
+}
+@keyframes upAndDownMove {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-0.1rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes rotateAnimate {
+  0% {
+    transform: rotate(10deg);
+  }
+  50% {
+    transform: rotate(-10deg);
+  }
+  100% {
+    transform: rotate(10deg);
+  }
+}
+@keyframes scaleAnimate {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
\ No newline at end of file