From 105128d7780861f699a3261fdad68804fe5b7c80 Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期四, 20 二月 2025 11:43:35 +0800
Subject: [PATCH] feat: 出场增加缴费状态查询

---
 src/components/page/MonthFeePay.vue |  540 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 505 insertions(+), 35 deletions(-)

diff --git a/src/components/page/MonthFeePay.vue b/src/components/page/MonthFeePay.vue
index 3dff2b8..d38043a 100644
--- a/src/components/page/MonthFeePay.vue
+++ b/src/components/page/MonthFeePay.vue
@@ -1,60 +1,185 @@
 <template>
-    <div class="weizhang-box">
-        <div class="weizhang-main-box">
-            <div class="weizhang-main-top">
-              <h1>鏈堢杞﹀姙鐞�</h1>
-            </div>
+    <div class="weizhang-box yuezucard-wrap">
+<!--      <div class="weizhang-main-top">-->
+<!--        <h1 class="title">鏈堢杞﹀姙鐞�</h1>-->
+<!--      </div>-->
+      <div class="weizhang-main-box">
             <div class="weizhang-main-bootom">
                 <div class="weizhang-main-form">
-                    <el-form label-width="100px" :model="statisticData" label-position="left">
-                        <el-form-item label="杞︾墝鍙凤細" style="margin-left: 25px;">
-                            <el-input v-model="statisticData.carNo" ></el-input>
+                    <el-form label-width="110px" :model="statisticData" ref="statisticData" :rules="rules" label-position="left">
+                        <el-form-item label="杞︾墝鍙凤細" style="margin-left: 25px;" prop="carNo">
+                            <el-input readonly @focus="isShow=true" v-model="statisticData.carNo" ></el-input>
                         </el-form-item>
-                        <el-form-item label="鎵嬫満鍙凤細" style="margin-left: 25px;">
+                        <el-form-item label="鎵嬫満鍙凤細" style="margin-left: 25px;" prop="phone">
                             <el-input v-model="statisticData.phone" ></el-input>
                         </el-form-item>
-                        <el-form-item label="濮撳悕锛�" style="margin-left: 25px;">
+                        <el-form-item label="杞︿富濮撳悕锛�" style="margin-left: 25px;" prop="name">
                             <el-input v-model="statisticData.name" ></el-input>
                         </el-form-item>
-                        <el-form-item label="閫夋嫨鍏ㄩ儴锛�" style="margin-left: 25px;">
-                          <el-select v-model="statisticData.allFlag" :onchange="changeAll">
+                        <el-form-item label="閫夋嫨鍏ㄩ儴锛�" style="margin-left: 25px;" prop="type">
+                          <el-select v-model="statisticData.type" :onchange="changeAll">
                             <el-option label="鍗曚釜" :value=0></el-option>
                             <el-option label="鍏ㄩ儴" :value=1></el-option>
                           </el-select>
                         </el-form-item>
-                      <el-form-item v-if="statisticData.allFlag == 0" label="鍋滆溅鍦猴細" style="margin-left: 25px;">
-                        <el-select v-model="statisticData.parkId" :onchange="changePark">
-                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
+                      <el-form-item v-if="statisticData.type == 0" label="鍋滆溅鍦猴細" style="margin-left: 25px;" prop="parkId">
+                        <el-select v-model="statisticData.parkId" @change="changePark">
+                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id + ''" ></el-option>
                         </el-select>
                       </el-form-item>
                         <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-if="showFlag">
-                            <el-button class="jiaofei-btn" type="primary" @click="pay()" >鏌ヨ</el-button>
+                            <el-button :disabled="isDisabled" class="jiaofei-btn" type="primary" @click="pay()" >鏌ヨ</el-button>
                         </el-form-item>
                     </el-form>
+                </div>
+                <div class="yuezu-box" v-if="searchShow">
+                  <div>
+                    <div class="current-box" v-if="startTime && endTime">鏈堢エ鍓╀綑鏃堕棿锛�<span class="utilTime">{{untilToday}}澶╋紙{{endTime}} 缁撴潫锛�</span></div>
+                    <div class="current-box" v-else>鏈堢エ鍓╀綑鏃堕棿锛氭殏鏈紑閫氭湀绁�</div>
+                  </div>
+<!--                  <div class="current-box" v-if="startTime && endTime">
+                    <span class="title">褰撳墠浣跨敤鏃堕棿锛�</span>
+                      {{startTime}} - {{endTime}}
+                  </div>-->
+                  <div class="yuezuCard">
+                    <div class="yuezu-line">
+                      <div class="title">
+                        閫夋嫨鏃堕棿娈碉細
+                      </div>
+                      <div class="yuezu-line-right">
+                        <el-menu
+                            :default-active="activeIndex"
+                            @select="handleSelect"
+                            class="el-menu-demo"
+                            mode="horizontal">
+                          <el-menu-item index="1">涓�涓湀</el-menu-item>
+                          <el-menu-item index="2">涓変釜鏈�</el-menu-item>
+                          <el-menu-item index="3">鍏釜鏈�</el-menu-item>
+                          <el-menu-item index="4">涓�骞�</el-menu-item>
+                        </el-menu>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="current-box">
+                    <span class="title">寮�濮嬫椂闂达細</span>
+                    {{compStartTime}}
+                  </div>
+                  <div class="current-box">
+                    <span class="title">缁撴潫鏃堕棿锛�</span>
+                    {{compEndTime}}
+                  </div>
+                  <div class="money-box" v-if="money">
+                    <div class="money">锟{money}}</div>
+                    <div class="money-content">缂磋垂閲戦</div>
+                  </div>
+                  <div class="yuezu-footer">
+                    <el-button v-if="startTime && endTime" class="jiaofei-btn2" type="danger">缁垂</el-button>
+                    <el-button v-else class="jiaofei-btn2" type="danger">寮�閫�</el-button>
 
+                  </div>
                 </div>
 
             </div>
         </div>
-
+      <t-keyword
+          :isShow="isShow"
+          @ok="isShow=false"
+          @cancel="isShow=false"
+          @inputchange="inputchange"
+          :finalValue="statisticData.carNo"
+      />
     </div>
 </template>
 
 <script>
-    export default {
+import {isMobile} from "@/utils/validate";
+import TKeyword from "@/components/page/components/TKeyword";
+
+export default {
         name: 'dashboard',
+        components: {
+          TKeyword,
+        },
         data() {
             return {
+                isShow: false,
                 ticketId:"",
                 table1:[],
+                type:null,
+                code:null,
+                id:null,
                 statisticData:{
-                  allFlag:0
+                  type:0,
+                  carNo:'',
+                  parkId:'',
+                  phone:'',
+                  name:'',
                 },
                 showFlag:true,
+                activeIndex:'',
+                searchShow:false,
+                startTime:'',
+                endTime:'',
+                compStartTime:'',
+                compEndTime:'',
+                isDisabled: false,
+                money: null,
+                yueZuObj:{},
+                rules: {
+                  carNo: [
+                    { required: true, message: '璇疯緭鍏ヨ溅鐗屽彿', trigger: ['blur','change'] },
+                  ],
+                  phone: [
+                    { required: true, message: '璇疯緭鍏ユ墜鏈哄彿', trigger: 'blur' },
+                    { validator: isMobile, trigger: 'blur' }
+                  ],
+                  name: [
+                    { required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'blur' },
+                  ],
+                  allFlag: [
+                    { required: true, message: '璇烽�夋嫨鍋滆溅鍦轰釜鏁�', trigger: 'change' },
+                  ],
+                  parkId: [
+                    { required: true, message: '璇烽�夋嫨鍋滆溅鍦�', trigger: 'change' },
+                  ]
+                }
             }
         },
+        computed: {
+          untilToday() {
+            if(this.endTime) {
+              let toady = new Date()
+              let cur = this.$moment(toady).format('YYYY-MM-DD')
+              return this.getDayDifference(cur,this.endTime)
+            }
+          }
+        },
         created(){
+          document.title = "鏈堢杞﹀姙鐞�";
+          let ua = window.navigator.userAgent.toLowerCase();
+          //鍒ゆ柇鏄笉鏄井淇�
+          if (ua.match(/MicroMessenger/i) == "micromessenger") {
+            // 寰俊
+            this.type = 0
+          }
+          //鍒ゆ柇鏄笉鏄敮浠樺疂
+          if (ua.match(/AlipayClient/i) == "alipayclient") {
+            //鏀粯瀹�
+            this.type = 1
+          }
+          if(this.type == null){
+            this.$message.error("璇风敤寰俊鎴栨敮浠樺疂鎵弿浜岀淮鐮�")
+            return;
+          }
           var url = window.location.href;
+          url = decodeURIComponent(url)
+          var count = url.split('?').length-1;
+          if(count >1){  //鑾峰彇鐢ㄦ埛淇℃伅鍚庤烦鍥炴潵鏈〉闈�
+            let data = this.getCodeFromUrl(url)
+            window.location.href = `http://hesuancj.cn/#/MonthFeePay?code=${encodeURIComponent(data.code)}&state=STATE&id=${encodeURIComponent(data.id)}`
+            return;
+          }
+
           var cs = url.split('?')[1];
           var cs_arr = cs.split('&');
           var cs={};
@@ -63,27 +188,267 @@
           }
           this.statisticData.parkId = cs.id;
           this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', null, res => {
-            this.table1 = res.data;
-
-            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByParkId', {parkId:cs.id}, res => {
-              this.statisticData.parkId = res.data.id;
-            })
+          this.table1 = res.data;
           })
         },
         methods: {
-            pay(){
-              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
-                if(res.code == 0){
-                  //鏈煡璇㈠埌鏈堢エ锛屽彲姝e父缂磋垂
-
-                }else {
-                  //鏌ヨ鍒版湀绁紝缁垂
-
+          pay(){
+              this.$refs.statisticData.validate((valid) => {
+                if(valid) {
+                  this.getYuezuMoney()
                 }
               })
             },
-          changePark(){
+          getYuezuMoney() {  //鑾峰彇闇�瑕佺殑鏈堢鐨刴oney
+            let params = {
+              parkId:this.statisticData.parkId,
+              type:this.statisticData.allFlag
+            }
 
+            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByPark', params, res => {
+              console.log(res,'res====111')
+              if(res.code == 0){
+                this.yueZuObj = res.data
+                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
+                  console.log(res,'res====')
+                  if(res.code == 0){
+                    this.searchShow = true
+                    this.activeIndex = ''  //閲嶇疆
+                    this.money = null
+                    this.compStartTime = ''
+                    this.compEndTime = ''
+                    //鏈煡璇㈠埌鏈堢エ锛屽彲姝e父缂磋垂
+                    if(res.data) {
+                      this.startTime = res.data.startTime
+                      this.endTime = res.data.endTime
+                    }else {
+                      this.startTime = ''
+                      this.endTime = ''
+                    }
+                  }else {
+
+                  }
+                })
+              }else {
+                this.searchShow = false
+                this.$message.error(res.msg)
+              }
+
+            })
+          },
+          handleSelect(key) {
+             this.activeIndex = key
+            if(key == 1) {
+              this.money = this.yueZuObj.monthMoney
+              if(this.startTime && this.endTime) {
+                let tomorrow = new Date(this.endTime)
+                tomorrow.setDate(tomorrow.getDate() + 1)
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,1)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }else {
+                let today = new Date()
+                let tomorrow = new Date(today);
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,1)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }
+            }else if(key == 2) {
+              this.money = this.yueZuObj.threeMonthMoney
+              if(this.startTime && this.endTime) {
+                let tomorrow = new Date(this.endTime)
+                tomorrow.setDate(tomorrow.getDate() + 1)
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,3)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }else {
+                let today = new Date()
+                let tomorrow = new Date(today);
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,3)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }
+            }else if(key == 3) {
+              this.money = this.yueZuObj.sixMonthMoney
+              if(this.startTime && this.endTime) {
+                let tomorrow = new Date(this.endTime)
+                tomorrow.setDate(tomorrow.getDate() + 1)
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,6)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }else {
+                let today = new Date()
+                let tomorrow = new Date(today);
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,6)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }
+            }else if(key == 4) {
+              this.money = this.yueZuObj.yearMoney
+              if(this.startTime && this.endTime) {
+                let tomorrow = new Date(this.endTime)
+                tomorrow.setDate(tomorrow.getDate() + 1)
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,12)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }else {
+                let today = new Date()
+                let tomorrow = new Date(today);
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
+                let a = this.getNewDate(tomorrow,12)
+                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
+              }
+            }
+          },
+          // 杈撳叆杞︾墝鍙�
+          inputchange(val, maxLength) {
+            console.log(val,'0000',maxLength)
+            if (this.statisticData.carNo && this.statisticData.carNo.length >= maxLength && val !== 'delete') {
+              return false
+            }
+            if (val === 'delete') {
+              this.statisticData.carNo = this.statisticData.carNo.slice(0, this.statisticData.carNo.length - 1)
+            } else {
+              this.statisticData.carNo += val.toUpperCase()
+            }
+          },
+          getNewDate(date, n) {//date 鏃ユ湡  n 鍓嶅悗鐩稿樊鏈堜唤 锛堢浉宸殑鏈堜唤锛�
+            let curDate = new Date(date),newDate = new Date(date),diff,remainder //curDate褰撳墠鏃ユ湡  newDate璁$畻鍚庢棩鏈�  diff鏃ユ湡鐩稿樊鏈堜唤  remainder n瀵�12鐨勪綑鏁�
+            newDate.setMonth(curDate.getMonth() + n); //璁剧疆鏈堜唤+n
+            diff = newDate.getMonth() - curDate.getMonth(); //璁$畻鍚庢湀涓庝箣鍓嶆湀宸��
+            diff < 0 ? diff += 12: diff; //濡傛灉宸�煎皬浜�12 瀵瑰叾+12
+            n > 0 ? remainder = n % 12 : remainder = n + 12 * Math.ceil((Math.abs(n) /12 )) //n>0鏃剁洿鎺ュ12鍙栦綑 n<0鏃讹紝灏嗗叾鍔犱笂 n鍙栫粷瀵瑰�煎悗鐨勫勾浠斤紙鍚戜笂鍙栨暣锛�* 12
+            if(diff != remainder){
+              return new Date(newDate.setMonth(newDate.getMonth(),0)) //濡傛灉diff涓巖emainder涓嶇浉绛夛紝姝ゆ椂鐨勬儏鍐垫槸Date.setMonth()鏂规硶鑷姩澶勭悊浜嗘湀鏈棩鏈熷悜鍚庨『寤跺埌涓嬩釜鏈堬紝灏嗗叾璁剧疆涓轰笂涓湀鐨勬渶鍚庝竴澶╋紝鍚﹀垯涓嶈繘琛屽鐞�
+            }
+            return newDate;
+          },
+          getDayDifference(date1, date2) {  //鐩稿樊鐨勫ぉ鏁�
+              const millisecondsPerDay = 24 * 60 * 60 * 1000; // 涓�澶╃殑姣鏁�
+              const timeDifference = Math.abs(new Date(date2).getTime() - new Date(date1).getTime()); // 鑾峰彇涓や釜鏃ユ湡鐨勬绉掓暟宸��
+              const dayDifference = Math.round(timeDifference / millisecondsPerDay); // 灏嗘绉掓暟宸�艰浆鎹负澶╂暟
+              return dayDifference;
+          },
+          changePark(val){
+            console.log(val,'鏀瑰彉鍋滆溅鍦�---')
+            this.statisticData.parkId = val
+            this.pay()
+          },
+          /**
+           * 瑙f瀽寰俊redirect_uri鍦板潃涓殑code
+           */
+          getCodeFromUrl (cur_url) {
+            let index = cur_url.split('?')[1]
+            let index2 = cur_url.split('?')[2]
+            let code = null
+            let id = null
+            let data = {}
+            let paramStr =index.split('&');
+
+            if(paramStr.length>1) {
+              code = paramStr[0].split('=')[1]
+              id = index2.split('=')[1]
+            }else {
+              id = paramStr[0].split('=')[1]
+              code = index2.split('&')[0].split('=')[1]
+            }
+            data.code = code
+            data.id = id
+            return data
+          },
+          getCode(){   //鑾峰彇鐢ㄦ埛寰俊鐧诲綍淇℃伅
+            this.statisticData.startTime = this.startTime
+            this.statisticData.endTime = this.endTime
+            this.statisticData.money  = this.money
+
+            if(this.type == 0 ){
+              //寰俊锛岃幏鍙朿ode
+              if(this.code==null||this.code==""){
+                var url = encodeURIComponent("http://hesuancj.cn/#/MonthFeePay?id="+this.statisticData.parkId);
+                window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?" +
+                    "appid=wx46e756aed958f895&redirect_uri="+url+"&response_type=code" +
+                    "&scope=snsapi_userinfo&state=STATE#wechat_redirect";
+              }else{
+                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/getOpenId', this.statisticData, res => {
+                  if(res.code === 0){
+                    var param = res.data;
+                    // 鐐瑰嚮鏀粯鏃跺�欒皟鐢�
+                    if (typeof WeixinJSBridge === 'undefined') {
+                      if (document.addEventListener) {
+                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(param), false)
+                      } else if (document.attachEvent) {
+                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(param))
+                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(param))
+                      }
+                    } else {
+                      this.onBridgeReady(param)
+                    }
+
+                    this.showFlag = false
+                  }else {
+                    alert('寰俊鏀粯璋冭捣澶辫触锛�')
+                  }
+                })
+              }
+            }else if(this.type == 1){
+              //鏀粯瀹濓紝涓嶈幏鍙朿ode
+              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/getAiLi', this.statisticData, res => {
+                if(res.code != 0){
+                  alert(res.data)
+                  this.showFlag = false
+                }else {
+                  this.$message({
+                    message: '2绉掑悗鑷姩璺宠浆鍒版敮浠橀〉闈紝闃叉鍐呭缃戞暟鎹悓姝ュ欢杩燂紝璇风◢绛�',
+                    type: 'success',
+                    duration:2000,
+                  });
+                  setTimeout(function(){window.location.href = res.msg;},2000);
+                  this.showFlag = false;
+                }
+              })
+
+            }
+          },
+          onBridgeReady (params) {
+            const that = this
+            WeixinJSBridge.invoke(
+                'getBrandWCPayRequest',
+                {
+                  appId: params.appId, // 鍏紬鍙峰悕绉帮紝鐢卞晢鎴蜂紶鍏�
+                  timeStamp: params.timeStamp, // 鏀粯绛惧悕鏃堕棿鎴筹紝娉ㄦ剰寰俊jssdk涓殑鎵�鏈変娇鐢╰imestamp瀛楁鍧囦负灏忓啓銆備絾鏈�鏂扮増鐨勬敮浠樺悗鍙扮敓鎴愮鍚嶄娇鐢ㄧ殑timeStamp瀛楁鍚嶉渶澶у啓鍏朵腑鐨凷瀛楃
+                  nonceStr: params.nonceStr, // 鏀粯绛惧悕闅忔満涓诧紝涓嶉暱浜� 32 浣�
+                  package: params.package, // 缁熶竴鏀粯鎺ュ彛杩斿洖鐨刾repay_id鍙傛暟鍊硷紝鎻愪氦鏍煎紡濡傦細prepay_id=\*\*\*锛�
+                  signType: params.signType, // 绛惧悕鏂瑰紡锛岄粯璁や负'SHA1'锛屼娇鐢ㄦ柊鐗堟敮浠橀渶浼犲叆'MD5'
+                  paySign: params.paySign // 鏀粯绛惧悕
+                },
+                (res) => {
+                  if (res.err_msg === 'get_brand_wcpay_request:ok') {
+                    //that.queryOrder() // 杩欓噷鏄煡璇㈣鍗曟槸鍚︽敮浠樺畬鎴愶紝鐒跺悗鎵ц鎴愬姛鍜屽け璐ョ殑涓氬姟閫昏緫
+                  } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
+                    alert('鏀粯澶辫触锛�')
+                  } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+                    alert('鏀粯鍙栨秷锛�')
+                  }
+                }
+            )
+          },
+          queryOrder() {
+            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/getById', {id: this.outParkId}, res => {
+              if (res.code === 0) {
+                let outpark = res.data
+                if(outpark.status === 1){
+                  window.location.href = "http://hesuancj.cn/#/indexOk?code2="+this.code2
+                  return;
+                }else {
+                  window.location.href = "http://hesuancj.cn/#/indexFail?code2="+this.code2
+                  return;
+                }
+              }
+            })
           },
           changeAll(){
 
@@ -96,6 +461,18 @@
 
 
 <style lang="scss">
+.yuezucard-wrap{
+  .el-form-item{
+    margin-bottom: 2.5vw!important;
+  }
+  .el-input__inner{
+    height: 5.33vw  /* 40/7.5 */;
+    line-height: 5.33vw;
+  }
+  .el-select{
+    width: 100%;
+  }
+}
     .weizhang-main-bootom{
         .el-input__inner{
             border:none;
@@ -119,6 +496,32 @@
 
 </style>
 <style lang="scss" scoped>
+.yuezu-line{
+  ::v-deep{
+    .el-menu.el-menu--horizontal{
+      border-bottom: none;
+    }
+    .el-menu--horizontal>.el-menu-item{
+      height: 6.4vw  /* 48/7.5 */;
+      line-height: 6.4vw  /* 48/7.5 */;
+      margin: 1.33vw  /* 10/7.5 */;
+      color: #409eff;
+      background: #ecf5ff;
+      border-color: #b3d8ff;
+      border-radius: 1.07vw  /* 8/7.5 */;
+    }
+    .el-menu-item{
+      font-size: 2.93vw  /* 22/7.5 */;
+    }
+    .el-menu--horizontal>.el-menu-item.is-active{
+      color: #fff;
+      margin: 1.33vw  /* 10/7.5 */;
+      border-radius: 1.07vw  /* 8/7.5 */;
+      border-bottom: none;
+      background: #409eff;
+    }
+  }
+}
 h1,h2,h3,h4,h5{
     font-family: '鑻规柟 涓瓑';
     font-weight: normal;
@@ -150,15 +553,25 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    padding:5.33vw  /* 40/7.5 */;
+    padding: 0 5.33vw  /* 40/7.5 */  5.33vw  /* 40/7.5 */  5.33vw  /* 40/7.5 */;
 }
 .weizhang-main-top{
-    height: 22.489vh  /* 300/13.34 */;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-bottom: 1px solid #f0f0f0;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    background: #fff;
+    .title{
+      font-size: 4.27vw  /* 32/7.5 */;
+      font-weight: bolder;
+      height: 11.73vw  /* 88/7.5 */;
+      line-height: 11.73vw  /* 88/7.5 */;
+    }
     .money{
         font-size: 6.93vw  /* 52/7.5 */;
         font-weight: 550;
@@ -173,6 +586,59 @@
 }
     .weizhang-main-form{
     }
+    .yuezu-box{
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 8vw  /* 30/7.5 */;
+      .current-box{
+        margin-left: 3.33vw  /* 25/7.5 */;
+        .utilTime{
+          font-weight: bolder;
+          color: #ff423b;
+        }
+        font-size: 3.73vw  /* 28/7.5 */;
+        color: #000;
+        margin-top: 4vw  /* 30/7.5 */;
+      }
+      .yuezuCard{
+        .yuezu-line{
+          .title{
+            margin-left: 3.33vw  /* 25/7.5 */;
+            font-size: 3.73vw  /* 28/7.5 */;
+            color: #000;
+            font-weight: bolder;
+            width: 100%;
+          }
+          .yuezu-line-right{
+            margin-top: 2.67vw  /* 20/7.5 */;
+          }
+          margin-top: 4vw  /* 30/7.5 */;
+        }
+      }
+      .money-box{
+        margin: 5.33vw  /* 40/7.5 */ auto 2.67vw  /* 20/7.5 */;
+        .money{
+          font-size:5.33vw  /* 40/7.5 */;
+          color: #000;
+          font-weight: bolder;
+          text-align: center;
+        }
+        .money-content{
+          font-size: 3.2vw  /* 24/7.5 */;
+          color: #888;
+          text-align: center;
+        }
+      }
+      .yuezu-footer{
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 6vw  /* 30/7.5 */;
+        margin-bottom: 6vw;
+      }
+    }
     .weizhang-tiaokuan{
         margin-top: 2.67vw  /* 20/7.5 */;
         h1{
@@ -187,6 +653,10 @@
         border-radius: 5.33vw  /* 40/7.5 */;
         background-image: linear-gradient(to right,#33b1fe,#0679dc);
     }
+    .jiaofei-btn2{
+      width: 64.53vw  /* 484/7.5 */;
+      border-radius: 5.33vw  /* 40/7.5 */;
+    }
 .logoPhone{
     margin-top: 0.67vw;
     width: 1.333rem  /* 100/75 */;

--
Gitblit v1.9.1