移动端开发

src/config/router.config.js

@@ -44,6 +44,16 @@ export const asyncRouterMap = [{
                 path: 'newPackageTips',
                 name: 'newPackageTips',
                 component: () => import('@views/hhr-view/newpackage/newPackageTips.vue')
+            },
+            {
+                path: 'danKuan',
+                name: 'danKuan',
+                component: () => import('@views/hhr-view/bandwidth/danKuan.vue')
+            },
+            {
+                path: 'rongHe',
+                name: 'rongHe',
+                component: () => import('@views/hhr-view/bandwidth/rongHe.vue')
             }
         ]
     }

src/views/hhr-view/bandwidth/danKuan.vue

+<template>
+    <div>
+        <img src="/picture/hhr/banner.png" style="width: 100%">
+        <van-button type="info" style="width: 150px; height: 50px;margin: 10px 20px 10px 20px;">30元/月</van-button>
+
+        <van-row type="flex" justify="center">
+            <p style="width: auto; height: 40px;margin: 10px 10px 10px 10px;">面向学校：广州工商学院（花都校区）</p>
+        </van-row>
+        <div>
+            <img  style="" src="/picture/hhr/info_logo_bg.png" style="width: 50%">
+<p>资费介绍</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "danKuan"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/hhr-view/bandwidth/rongHe.vue

+<template>
+    <div>
+        <img src="/picture/hhr/banner.png" style="width: 100%">
+        <van-button type="info" style="width: 150px; height: 50px;margin: 10px 20px 10px 20px;">30元/月</van-button>
+
+        <van-row type="flex" justify="center">
+            <p style="width: auto; height: 40px;margin: 10px 10px 10px 10px;">面向学校：广州工商学院（花都校区）</p>
+        </van-row>
+        <div>
+            <img  style="" src="/picture/hhr/info_logo_bg.png" style="width: 50%">
+<p>资费介绍</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "danKuan"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/hhr-view/hhrCustomer.vue

@@ -8,12 +8,12 @@
         <div style="height:40px"></div>
         <div style="background-image: url('./picture/hhr/02.png');background-repeat: no-repeat;background-position: center;background-size: 100%;width: 77%;height: 280px;margin: auto;">
         </div>
-        <div v-show="!newcar">
+        <div v-show="newcarAll">
             <div @click="newcartouch" style="background-image: url('./picture/hhr/03.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;">
             </div>
             <div style="text-align: center;color: white;font-size: 14px;margin-top: -20px">（新开卡优惠+0息分期购机）</div>
             <div style="background-image: url('./picture/hhr/04.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;"></div>
-            <div style="background-image: url('./picture/hhr/05.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;"></div>
+            <div @click="newcartouchB" style="background-image: url('./picture/hhr/05.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;"></div>
             <fieldset class="layui-elem-field"
                       style="width: 85%;margin: 0 auto;border-radius: 10px;margin-bottom: 10px;background-color: rgba(255,255,255, 0.8);">
                 <legend style="text-align: center;background-color: white;border-radius: 10px;font-weight: bold;background-color: rgb(244,194,124);width: 50%;">
@@ -30,10 +30,15 @@
                 </div>
             </fieldset>
         </div>
-        <div  v-show="newcar">
+        <div  v-show="newcar" >
             <div style="background-image: url('./picture/hhr/06.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="newPackage"></div>
             <div style="height: 250px"></div>
         </div>
+        <div  v-show="newcarB">
+            <div style="background-image: url('./picture/hhr/b1.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="danKuan"></div>
+            <div style="background-image: url('./picture/hhr/b2.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="rongHe"></div>
+            <div style="height: 250px"></div>
+        </div>
         <van-popup v-model="kefushow">
             <img src="/picture/hhr/service-qrcode.jpg" style="width:100%;height: 100%" >
         </van-popup>
@@ -47,7 +52,9 @@
        name:"hhrCustomer",
         data(){
            return{
+               newcarAll:true,
                newcar:false,
+               newcarB:false,
                kefushow: false
            }
         }
@@ -56,6 +63,11 @@
         methods: {
             newcartouch(){
                 this.newcar=true
+                this.newcarAll=false
+            },
+            newcartouchB(){
+                this.newcarB=true
+                this.newcarAll=false
             },
             newcargoback(){
                 this.newcar=false
@@ -65,6 +77,12 @@
             },
             newPackage(){
                 this.$router.push({path: 'newPackageTips'})
+            },
+            danKuan(){
+                this.$router.push({path: 'danKuan'})
+            },
+            rongHe(){
+                this.$router.push({path: 'rongHe'})
             }
         }
     }