1.自推模板

2.随心选激活页
3.隐私声明修改 统一

purchase_H5/src/components/unbuyModal.vue

@@ -19,11 +19,7 @@
             </div>
           </div>
           <div class="input-box">
-            <div class="input" style="
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-              ">
+            <div class="input" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
               {{ radio === "0" ? "退订原因" : reason }}
             </div>
             <div class="code" style="color: #d6000f; text-align: end" @click="showSheet = true">
@@ -44,17 +40,13 @@
     <van-action-sheet lock-scroll close-on-popstate v-model="showSheet" title="退订原因" @close="closeSheet">
       <van-radio-group v-model="radio">
         <van-cell-group>
-          <van-row>
-            <div v-for="(item, index) in resonList" style="width: 100%" :key="index">
-              <van-col span="12">
-                <van-cell :key="index" :title="item.title" clickable @click="radioClick(item.value)">
-                  <template #right-icon>
-                    <van-radio checked-color="#d6000f" :name="item.value" />
-                  </template>
-                </van-cell>
-              </van-col>
-            </div>
-          </van-row>
+          <div v-for="(item, index) in resonList" style="width: 100%" :key="index">
+            <van-cell :key="index" :title="item.title" clickable @click="radioClick(item.value)">
+              <template #right-icon>
+                <van-radio checked-color="#d6000f" :name="item.value" />
+              </template>
+            </van-cell>
+          </div>
         </van-cell-group>
         <div class="fileBox">
           <van-field v-model="message" rows="2" autosize type="textarea" placeholder="请描述原因，如遇到其他问题请反馈给我们" show-word-limit />
@@ -255,7 +247,7 @@ export default {
         userid: userid,
       }).then((res) => {
         if (res.data.length > 0) {
-          this.$emit('change',false)
+          this.$emit('change', false)
           let orderTime = res.data[0].ORDERTIME.substring(0, 8)
           let date = new Date()
           let year = parseInt(date.getFullYear())
@@ -279,8 +271,8 @@ export default {
           } else {
             this.unbuyClick()
           }
-        }else{
-          this.$emit('change',false)
+        } else {
+          this.$emit('change', false)
           this.unbuyClick();
         }
       });
@@ -297,7 +289,7 @@ export default {
       if (this.radio === "0") {
         return this.$toast("请选择退订原因");
       }
-      login({phone, vcode }).then(
+      login({ phone, vcode }).then(
         async (res) => {
           if (res.code === 500 || res.data === "") {
             this.$toast.fail("登录失败");
@@ -310,9 +302,9 @@ export default {
               userid: res.data.userid,
               phone: this.loginForm.phone,
             });
-            if(this.pageData.remarks.treaty === '1'){
+            if (this.pageData.remarks.treaty === '1') {
               this.getOrderList(res.data.userid)
-            }else{
+            } else {
               this.unbuyClick()
             }
             // this.opoutShow = true;

purchase_H5/src/router/index.js

@@ -208,7 +208,15 @@ const routes = [
     },
     component: () => import('../views/page/jihuo-page.vue')
   },
-  
+  {
+    //  视频流量激活
+    path: '/jihuo/suixinxuan',
+    name: '/jihuo/suixinxuan',
+    meta: {
+      title: "视频流量激活"
+    },
+    component: () => import('../views/page/jihuo-suixinxuan.vue')
+  },
 ]
 // let mode = window.location.href.indexOf("#") != -1?"hash":'history'
 const router = new VueRouter({

purchase_H5/src/templates/templateCom/components/tongRen.vue

@@ -48,9 +48,7 @@ export default {
     if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne
     }
-    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
-      .privacy !==
-      null) {
+    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks.privacy !==null) {
       if (this.pageData.remarks.privacy === '1') {
         this.checked = true
       }

purchase_H5/src/templates/templateCom/index.vue

@@ -14,16 +14,7 @@
         <div id="lottie_box"></div>
       </div>
       <!-- 上层png -->
-      <div class="banner2" :class="
-          productJson.length > 0 &&
-          productJson[0].dongHua &&
-          productJson[0].dongHua == '1'
-            ? 'cartoon2'
-            : ''
-        " v-if="
-          pageData.mainProduct.bannerPics[2] &&
-          pageData.mainProduct.bannerPics[2] !== ''
-        ">
+      <div class="banner2" :class="productJson.length > 0 &&productJson[0].dongHua &&productJson[0].dongHua == '1'? 'cartoon2': ''" v-if=" pageData.mainProduct.bannerPics[2] &&pageData.mainProduct.bannerPics[2] !== ''">
         <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
       </div>
       <!-- 顶层png/gif -->
@@ -195,7 +186,7 @@ export default {
   created () {
     document.title = this.pageData.mainProduct.productName;
     this.phone = this.$route.query.phone;
-    if ( this.pageData.mainProduct.cacheSeatOne &&this.pageData.mainProduct.cacheSeatOne !== null) {
+    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
       this.productJson = this.pageData.mainProduct.cacheSeatOne;
     }
   },

purchase_H5/src/templates/templatePush/components/tongRen.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="btnModal">
     <div class="inputBox">
-      <input v-model="phone" class="input" type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码">
+      <input v-model="phone" class="input" type="text" maxlength="11" placeholder="请输入联通号码">
     </div>
     <div class="btnBox">
       <div class="btnText" :style="{'background-image': `linear-gradient(${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`}" @click="btnClick">
         立即开通
       </div>
     </div>
+    <div class="privacyBox">
+      <van-checkbox v-model="checked" checked-color="#FFDE60">
+        <p style="margin: 0; padding: 0">
+          我已阅读并同意
+        </p>
+      </van-checkbox>
+      <span class="span" style="color: #FFDE60" @click="showConceal = true">《隐私声明》</span>
+    </div>
+    <!-- 隐私条款 -->
+    <conceal v-model="showConceal" :pageData="pageData"></conceal>
   </div>
 </template>
 
@@ -15,49 +25,36 @@
 import {
   Dialog
 } from "vant";
+import conceal from "../../../components/hideModal.vue";
 export default {
   data () {
     return {
-      phone: ""
+      phone: "",
+      checked: false,
+      showConceal: false
     }
   },
+  components: {
+    conceal
+  },
   props: {
     pageData: Object
   },
+  created () {
+    if (this.pageData.remarks.privacy === '1') {
+      this.checked = true
+    }
+  },
   methods: {
-    inpChange (e) {
-      if (/^1[3456789]\d{9}$/.test(this.phone)) {
-        let str = this.phone.slice(0, 3)
-        let str2 = this.phone.slice(0, 4)
-        let number = this.$store.state.fictitious.split(',')
-        let isDialog = true
-        if (number !== '') {
-          number.forEach(element => {
-            if (element === str || element === str2) {
-              isDialog = false
-            }
-          });
-        }
-        if (isDialog === false) {
-          Dialog({
-            message: '您的号码为虚拟运营商号码，不支持办理此业务',
-            theme: 'round-button',
-          })
-          return false
-        }
-        this.$emit('phoneNum', this.phone)
-        setTimeout(() => {
-          this.$emit('btnClick')
-          e.srcElement.blur()
-        }, 100)
-
-      }
-    },
     btnClick () {
       if (this.phone === '') {
         this.$toast('请输入手机号')
         return false
       }
+      if (this.checked == false) {
+        this.$toast('请勾选隐私声明')
+        return false
+      }
       if (/^1[3456789]\d{9}$/.test(this.phone)) {
         let str = this.phone.slice(0, 3)
         let str2 = this.phone.slice(0, 4)
@@ -73,15 +70,37 @@ export default {
       } else {
         this.$toast('手机号格式错误')
       }
-
-
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .btnText {
   color: #f60f0b;
 }
+.privacyBox {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 32px;
+  font-size: 28px;
+  .van-checkbox {
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .span {
+    display: flex;
+    align-items: center;
+  }
+  p {
+    color: #fff;
+  }
+  .van-icon {
+    transform: scale(0.8, 0.8);
+    border-color: #ffde60;
+  }
+}
 </style>

purchase_H5/src/templates/templatePush/index.vue

@@ -6,7 +6,8 @@
     <!-- 统一认证组件 -->
     <tong-ren @btnClick='openIframe' :pageData="pageData" @phoneNum="phoneFuction">
     </tong-ren>
-    <div class="contentBox" v-if="pageData.mainJson.orderImg" :style="{'backgroundColor':pageData.mainJson.orderBgcol,'color':pageData.mainJson.pageTextcol}">
+
+    <div class="contentBox" v-if="pageData.mainJson.explainImg" :style="{'backgroundColor':pageData.mainJson.orderBgcol,'color':pageData.mainJson.pageTextcol}">
       <div class="roundBox long">
         <div class="mini" :style="{'backgroundColor':pageData.mainJson.orderBdcol}">
         </div>
@@ -24,7 +25,7 @@
         </div>
       </div>
       <div class="guidancePic">
-        <img :src="imgUrl +pageData.mainJson.orderImg" style="width: 100%;height:100%" />
+        <img :src="imgUrl +pageData.mainJson.explainImg" style="width: 100%;height:100%" />
       </div>
     </div>
     <div class="contentBox" v-if="pageData.mainProduct.givePhoneInfo" :style="{'backgroundColor':pageData.mainJson.orderBgcol,'color':pageData.mainJson.pageTextcol}">
@@ -47,27 +48,56 @@
       <div class="main" v-html="pageData.mainProduct.givePhoneInfo">
       </div>
     </div>
+    <div class="tabBtn" :style="{'backgroundColor':pageData.mainJson.orderBgcol,'color':pageData.mainJson.pageTextcol}">
+      <div class="tabBox" v-for="(item,index) in tabArr" :key="index" @click="tabClick(item)">
+        <div class="img">
+          <img :src="item.icon" alt="" />
+        </div>
+        <div>{{item.tabName}}</div>
+      </div>
+    </div>
+    <!-- 登录弹框组件 -->
+    <login-modal v-model="showLogin" :type="type" :text="text" @getIsBuy="getIsBuy"></login-modal>
     <!-- 订购超时 -->
     <timeout-modal v-model="showTimeout"></timeout-modal>
+    <!-- 退订弹框组件 -->
+    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
+    <!-- 遮罩 -->
+    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
   </div>
 </template>
 <script>
 import common from "../../common/common";
 import timeoutModal from "../../components/timeoutModal.vue";
+import unbuyModal from "../../components/unbuyModal.vue";
+import newZheZhao from "../../components/newZheZhao.vue";
+import loginModal from "../../components/login.vue";
 import tongRen from "./components/tongRen.vue";
+import addR from "../../common/addRecord";
+import wx from "weixin-js-sdk";
 export default {
-
   mixins: [common],
   components: {
     timeoutModal,
     tongRen,
+    unbuyModal,
+    newZheZhao,
+    loginModal
   },
   data () {
     return {
       imgUrl: process.env.VUE_APP_IMGS_URL,
       showTimeout: false,
+      showUnbuy: false,
+      showLogin: false,
+      unBuyDrainage: false,
+      isApplet: false,
+      unBuyDrainageText: "",
       phone: "",
       isBuy: "未订购",
+      tabArr: [],
+      type: "",
+      text: "",
     }
   },
   created () {
@@ -75,15 +105,95 @@ export default {
     if (this.$route.query.phone) {
       this.phone = this.$route.query.phone
     }
+    if (this.pageData.remarks.tabArr && this.pageData.remarks.tabArr.length > 0) {
+      this.tabArr = this.pageData.remarks.tabArr
+      let arr = []
+      this.tabArr.forEach(val => {
+        if (val.tabName == '会员领取') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./components/img/huiyuan.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '流量激活') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./components/img/liuliang.png")
+          arr.push(obj)
+        }
+        if (val.tabName == '退订产品') {
+          let obj = {}
+          obj.tabName = val.tabName
+          obj.tabUrlBasics = val.tabUrlBasics
+          obj.tabUrlApplet = val.tabUrlApplet
+          obj.icon = require("./components/img/tuiding.png")
+          arr.push(obj)
+        }
+      })
+      this.tabArr = arr
+    } else {
+      if (this.pageData.remarks.memberBtn == '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./components/img/huiyuan.png")
+        obj.tabName = '会员领取'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.memberBtn == '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./components/img/liuliang.png")
+        obj.tabName = '流量激活'
+        this.tabArr.push(obj)
+      }
+      if (this.pageData.remarks.tuidingBtn == '1') {
+        let obj = {}
+        obj.tabUrlBasics = ""
+        obj.tabUrlApplet = ""
+        obj.icon = require("./components/img/tuiding.png")
+        obj.tabName = '退订产品'
+        this.tabArr.push(obj)
+      }
+    }
 
   },
+  mounted () {
+    addR.showSP();
+    wx.miniProgram.getEnv(res => {
+      this.isApplet = res.miniprogram
+    })
+  },
   methods: {
     phoneFuction (e) {
       this.phone = e
-    }
+    },
+    getChildData (data) {
+      this.isBuy = data;
+    },
+    async beforeLogin (type) {
+      this.type = type;
+      if (this.user.userid) {
+        if (type === "member") {
+          this.toLink(type);
+        } else if (type === "unBUy") {
+          addR.unBuyClick();
+          this.showUnbuy = true;
+        }
+      } else if (type === "unBUy") {
+        addR.unBuyClick();
+        this.showUnbuy = true;
+      } else {
+        addR.loginClick();
+        this.showLogin = true;
+      }
+    },
   }
-
-
 }
 </script>
 <style lang='scss'>
@@ -141,10 +251,9 @@ export default {
       border: none;
       outline: none;
       height: 100%;
-      font-size: 29px;
-
+      font-size: 33px;
       font-family: HYQiHei;
-      font-weight: bold;
+      font-weight: normal;
       color: #b0acac;
       opacity: 0.7;
       line-height: 79px;
@@ -152,7 +261,7 @@ export default {
   }
 
   .btnBox {
-    width: 516px;
+    width: 603px;
     height: 96px;
     margin: 30px auto 40px auto;
     border-radius: 35px;
@@ -171,23 +280,21 @@ export default {
       font-size: 50px;
       font-family: HYQiHei;
       font-weight: bold;
-      // background: linear-gradient(rgb(158, 156, 149), #FBD657);
-      // box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.64);
-      // color: #F60F0B;
     }
   }
 
   .contentBox {
-    width: 638px;
+    width: 640px;
     border-radius: 20px;
     margin: 0 auto;
-    margin-bottom: 68px;
-    padding: 41px 35px 56px 40px;
+    // margin-bottom: 68px;
+    margin-top: 40px;
+    padding: 59px 35px;
     box-sizing: border-box;
 
     .roundBox {
       min-width: 400px;
-      margin: 40px auto;
+      margin: 0 auto;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -198,7 +305,6 @@ export default {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-
         margin: 0 5px;
       }
 
@@ -213,18 +319,17 @@ export default {
         width: 16px;
         height: 16px;
         border-radius: 50%;
-
         margin: 0 5px;
       }
 
       .text {
         min-width: 200px;
-        height: 79px;
+        height: 68px;
         text-align: center;
-        font-size: 36px;
+        font-size: 34px;
         font-family: HYQiHei;
         font-weight: bold;
-        line-height: 79px;
+        line-height: 68px;
         border-radius: 39px;
         margin: 0 15px;
         padding: 0 30px;
@@ -232,10 +337,16 @@ export default {
     }
 
     .main {
+      height: 655px;
+      overflow-y: scroll;
       font-size: 22px;
       font-family: HYQiHei;
       font-weight: normal;
       line-height: 33px;
+      margin-top: 36px;
+    }
+    .guidancePic {
+      margin-top: 50px;
     }
   }
 
@@ -288,5 +399,30 @@ export default {
       left: 37px;
     }
   }
+  .tabBtn {
+    width: 640px;
+    height: 138px;
+    margin: 40px auto;
+    margin-bottom: 80px;
+    border-radius: 20px;
+    padding: 22px 54px;
+    box-sizing: border-box;
+    // padding: 40px;
+    display: flex;
+    justify-content: space-between;
+
+    .tabBox {
+      font-size: 26px;
+      text-align: center;
+      .img {
+        // padding: 0 50px;
+
+        img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+  }
 }
 </style>

purchase_H5/src/templates/templateSuixinxuan/index.vue

@@ -78,7 +78,7 @@ import {
   detMainProduct,
   strategytemplate
 } from "../../api";
-import conceal from "../../components/conceal.vue";
+import conceal from "../../components/hideModal.vue";
 export default {
   mixins: [common],
   components: {

purchase_H5/src/templates/templateXinJiang/index.vue

@@ -98,7 +98,7 @@ import {
   detMainProduct,
   strategytemplate
 } from "../../api";
-import conceal from "../../components/conceal.vue";
+import conceal from "../../components/hideModal.vue";
 
 export default {
   mixins: [common],

purchase_H5/src/views/manual/manual004.vue

@@ -36,7 +36,7 @@
 <script>
 import addR from "../../common/addRecord";
 import vuePuzzle from "vue-puzzle-vcode";
-import conceal from "../../components/conceal.vue";
+import conceal from "../../components/hideModal.vue";
 import unbuyModal from "../../components/unbuyModal.vue";
 import MgtvApi from "@/util/mgTvJssdk.js";
 import wx from "weixin-js-sdk";

purchase_H5/src/views/page/jihuo-suixinxuan.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="suixinxuan">
+    <div class="title">
+      <img src="./img/title.png" alt="">
+    </div>
+    <div class="box list">
+      <div class="span">
+        *点击相应APP查看其流量激活流程
+      </div>
+      <div class="flex">
+        <div class="iconBox" @click="openUrl('tencent')">
+          <img class="icon" src="./img/tencent.png" alt="">
+          <div class="span">腾讯视频</div>
+        </div>
+        <div class="iconBox" @click="openUrl('aqy')">
+          <img class="icon" src="./img/aqy.png" alt="">
+          <div class="span">爱奇艺</div>
+        </div>
+        <div class="iconBox" @click="openUrl('yk')">
+          <img class="icon" src="./img/yk.png" alt="">
+          <div class="span">优酷视频</div>
+        </div>
+        <div class="iconBox" @click="openUrl('bili')">
+          <img class="icon" src="./img/bili.png" alt="">
+          <div class="span">哔哩哔哩</div>
+        </div>
+      </div>
+
+    </div>
+    <div class="box contentBox">
+      <div class="roundBox">
+        <div class="mini"></div>
+        <div class="small"></div>
+        <div class="model"></div>
+        <div class="text">温馨提示</div>
+        <div class="model"></div>
+        <div class="small"></div>
+        <div class="mini"></div>
+      </div>
+      <div class="main">
+          <p>活动规则：</p>
+          <p>1、2022年10月1日-12月31日</p>
+          <p>2、活动内容：</p>
+          <p>1）活动期间，订购尊享畅视会员的用户每月可获得返还5元话费至订购本产品的手机号码，最多返还6个月，每位用户仅可参加一次促销活动，用户退订重新订购将不再享受该优惠</p>
+          <p>2）5元话费将在成功订购后的48小时内，充值至订购本产品的手机号码</p>
+          <p>业务说明</p>
+          <p>注意：智慧沃家成员用户、主副卡用户订购当前定向流量产品，只限该成员使用，其他成员不可共享。达量限速套餐用户订购当前定向流量产品，包内定向流量不提升原套餐限速阈值和网速，不能作为限速后解限的加速包使用，依然执行基础套餐限速阈值的约定，限速后本流量包也会在限速下使用。</p>
+          <p>使用说明</p>
+          <p>1.本产品名称为“尊享畅视会员”，资费16元/月。开通本产品即可赠送“畅视IA体验馆”会员，您可通过微信搜索“畅视AI体验馆”小程序登录使用，并且用户每月可在30+款权益中任选一款权益（权益可能因供货原因增减，具体权益请以领取页面展示为准）</p>
+          <p>2.本产品同时包含15GB定向流量，支持腾讯视频、爱奇艺、优酷、哔哩哔哩4款视频移动客户端全码率观看，流量当月有效。</p>
+          <p>3.本产品订购立即生效，退订次月失效，如未退订将按自然月续订并收费。订购、使用本产品请以本机实际使用号码为准。</p>
+          <p>4.会员使用规则：</p>
+          <p>(1).权益领取周期为自然月。每月视频权益需用户手动领取，如当月权益未领取，次月无法补领上月权益，续订用户每月需重新手动选取会员。</p>
+          <p>(2).畅视C+会员权益领取时间：首订用户可以立即领取，续订用户每月5号至月底。</p>
+          <p>(3).用户退订当月仍可以领取视频权益，次月失效。</p>
+          <p>(4).本产品中包含的视频权益仅限移动端使用。</p>
+          <p>(5).本产品为虚拟产品，成功充值后不支持退货、退款。</p>
+          <p>5.定向流量使用规则：</p>
+          <p>(1). 本产品包含15GB定向流量，超出15GB的部分按照用户所选套餐资费或标准资费收取。</p>
+          <p>订购成功后，定向流量自动发放到订购号码，当月内有效。如在使用腾讯视频、爱奇艺、优酷、哔哩哔哩4款视频移动客户端播放视频时，未见免流标识，可手动激活。</p>
+          <p>(2).您可通过微信公众号“联通畅视”-“享·服务”-“定向流量查询”查询本产品流量剩余情况。</p>
+          <p>(4).本产品限全国使用，不支持港、澳、台地区及国际漫游。</p>
+          <p>(5).用户退订后流量当月内有效，次月不再赠送。</p>
+          <p>(6).本产品为合作产品，期间可能因不可控因素影响会造成本产品流量使用客户端的增加或减少，敬请谅解。</p>
+          <p>6.本产品仅支持中国大陆地区使用；本产品仅支持中国联通用户使用。</p>
+          <p>7.沃3G预付费20元卡、联通上网卡及数据副卡暂不支持本产品，联通互联网套餐（联通大王卡、流量大王卡等）入网前两月不可订购本产品。</p>
+          <p>8.请使用默认3GNET接入点访问本产品。</p>
+          <p>9.请勿使用流量监控及代理类软件，避免策略失效而产生流量费。</p>
+          <p>10.如有任何疑问，请咨询中国联通客服10010。</p>
+          <p>流量使用说明</p>
+          <p>流量使用范围：点播/缓存</p>
+          <p>不在流量使用范围：直播/音频/文字/弹幕/视频购/奇秀视频</p>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    openUrl (val) {
+      let url = ''
+      if (val == 'tencent') {
+        url = 'https://operation.mige.tv/a/#/tencent/page'
+      } else if (val == 'aqy') {
+        url = "https://live.mige.tv/platform/ytpxz/tutorial/aiqiyi.html"
+      } else if (val == 'yk') {
+        url = "https://live.mige.tv/platform/ytpxz/tutorial/youku.html"
+      } else if (val == 'bili') {
+        url = 'https://live.mige.tv/platform/ytpxz/tutorial/bilibili.html'
+      }
+      window.location.href = url
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.suixinxuan {
+  width: 100%;
+  height: 100vh;
+  overflow-y: scroll;
+  background: linear-gradient(0deg, #03115c, #042b86);
+  .title {
+    width: 380px;
+    height: 75px;
+    margin: 0 auto;
+    margin-bottom: 60px;
+    margin-top: 79px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .box {
+    width: 638px;
+    background: #2048a5;
+    border-radius: 20px;
+    margin: 0 auto;
+  }
+  .list {
+    min-height: 322px;
+    padding: 60px 53px;
+    box-sizing: border-box;
+    .span {
+      width: 100%;
+      text-align: center;
+      font-size: 26px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    .flex {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .iconBox {
+        margin-top: 35px;
+        .icon {
+          width: 102px;
+          height: 102px;
+        }
+        div {
+          margin-top: 15px;
+        }
+      }
+    }
+  }
+  .contentBox {
+    margin-top: 40px;
+    margin-bottom: 40px;
+    padding: 59px 35px;
+    box-sizing: border-box;
+    color: #fff;
+    .roundBox {
+      min-width: 400px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 79px;
+      height: 79px;
+
+      div {
+        background-color: #fff;
+      }
+      .mini {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin: 0 5px;
+      }
+
+      .small {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin: 0 5px;
+      }
+
+      .model {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        margin: 0 5px;
+      }
+
+      .text {
+        min-width: 200px;
+        height: 68px;
+        text-align: center;
+        font-size: 34px;
+        font-family: HYQiHei;
+        font-weight: bold;
+        line-height: 68px;
+        border-radius: 39px;
+        margin: 0 15px;
+        padding: 0 30px;
+        color: #2048a5;
+      }
+    }
+
+    .main {
+      height: 655px;
+      overflow-y: scroll;
+      font-size: 22px;
+      font-family: HYQiHei;
+      font-weight: normal;
+      line-height: 33px;
+      margin-top: 36px;
+      p {
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>