SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit 12bbfccb1504d24461cf581e89e6224bcc365f5f

Authored by 夏洋涛
1 parent e761f677
Exists in master

feat:新埋点对接

Showing 9 changed files with 778 additions and 696 deletions   Show diff stats
public/index.html
  Diff comments   View file @12bbfcc
@@ -2,70 +2,25 @@ @@ -2,70 +2,25 @@
2 <html lang="en"> 2 <html lang="en">
3 3
4 <head> 4 <head>
5 - <meta charset="utf-8">  
6 - <meta http-equiv="X-UA-Compatible" content="IE=edge">  
7 - <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
8 - <meta name="format-detection" content="telephone=yes" />  
9 - <link rel="icon" href="<%= BASE_URL %>favicon.ico">  
10 - <title></title>  
11 - <!-- 埋点 -->  
12 - <!-- <script src="https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script> -->  
13 - <script>  
14 - (function(w, d, s, q, i) {  
15 - w[q] = w[q] || [];  
16 - var f = d.getElementsByTagName(s)[0],  
17 - j = d.createElement(s);  
18 - j.async = true;  
19 - j.id = 'beacon-aplus';  
20 - j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085';  
21 - f.parentNode.insertBefore(j, f);  
22 - })(window, document, 'script', 'aplus_queue');  
23 -  
24 - aplus_queue.push({  
25 - action: 'aplus.setMetaInfo',  
26 - arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']  
27 - });  
28 -  
29 -  
30 - aplus_queue.push({  
31 - action: 'aplus.setMetaInfo',  
32 - arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']  
33 - });  
34 -  
35 - aplus_queue.push({  
36 - action: 'aplus.setMetaInfo',  
37 - arguments: ['appId', '60506758']  
38 - });  
39 - aplus_queue.push({  
40 - 'action': 'aplus.sendPV',  
41 - 'arguments': [{  
42 - is_auto: false  
43 - }, {  
44 - miniAppId: '2001895516',  
45 - }]  
46 - })  
47 - // aplus_queue.push({  
48 - // action: 'aplus.setMetaInfo',  
49 - // arguments: ['miniAppId', '2001895516']  
50 - // });  
51 - // aplus_queue.push({  
52 - // action: 'aplus.setMetaInfo',  
53 - // arguments: ['miniAppName', '红色网上游']  
54 - // });  
55 - </script> 5 + <meta charset="utf-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport"
  8 + content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  9 + <meta name="format-detection" content="telephone=yes" />
  10 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  11 + <title></title>
  12 + <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
  13 + <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>
56 </head> 14 </head>
57 15
58 <body> 16 <body>
59 - <noscript>  
60 - <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.  
61 - Please enable it to continue.</strong>  
62 - </noscript>  
63 - <div id="app"></div>  
64 - <!-- 地图 -->  
65 - <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script>  
66 - <!-- 政务中台JSAPI -->  
67 - <script src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>  
68 - 17 + <noscript>
  18 + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
  19 + Please enable it to continue.</strong>
  20 + </noscript>
  21 + <div id="app"></div>
  22 + <!-- 地图 -->
  23 + <script src="https://webapi.amap.com/maps?v=1.4.15&key=61af1988b71a634a59a0de29409baeb8"></script>
69 </body> 24 </body>
70 25
71 </html> 26 </html>
72 \ No newline at end of file 27 \ No newline at end of file
public/zwlogJS接入.html
  Diff comments   View file @12bbfcc
@@ -17,9 +17,11 @@ @@ -17,9 +17,11 @@
17 _user_id: "用户ID", 17 _user_id: "用户ID",
18 _user_nick: "用户昵称" 18 _user_nick: "用户昵称"
19 }) 19 })
  20 + console.log(2222)
20 21
21 //onReady表示zwlog加载完成后的函数，它接收一个匿名函数，而sendPV与record方法均要在匿名函数内调用。eg: 22 //onReady表示zwlog加载完成后的函数，它接收一个匿名函数，而sendPV与record方法均要在匿名函数内调用。eg:
22 zwlog.onReady(function () { 23 zwlog.onReady(function () {
  24 + console.log(1111)
23 //PV日志 25 //PV日志
24 zwlog.sendPV({ 26 zwlog.sendPV({
25 miniAppId: 'IRS服务侧应用appid', 27 miniAppId: 'IRS服务侧应用appid',
@@ -11,8 +11,17 @@ export default { @@ -11,8 +11,17 @@ export default {
11 isElder: false, 11 isElder: false,
12 } 12 }
13 }, 13 },
  14 + watch: {
  15 + $route(to, from) {
  16 + console.log('zheliban 》》》 ', to, from)
  17 + this.$zwlogPvGlobal({ url: to.meta.pagePath, enterPageTime: new Date() })
  18 + this.$zwlogPvGlobal({
  19 + url: from.meta.pagePath,
  20 + leavePageTime: new Date(),
  21 + })
  22 + },
  23 + },
14 mounted() { 24 mounted() {
15 - // new vConsole()  
16 ZWJSBridge.onReady(() => { 25 ZWJSBridge.onReady(() => {
17 console.log('初始化完成后，执行bridge方法') 26 console.log('初始化完成后，执行bridge方法')
18 }) 27 })
src/common/zwUtil.js 0 → 100644
  Diff comments   View file @12bbfcc
@@ -0,0 +1,134 @@ @@ -0,0 +1,134 @@
  1 +
  2 +// 埋点对象
  3 +var zwlog;
  4 +
  5 +// 页面埋点数据
  6 +var pageLogMap = {};
  7 +
  8 +/*
  9 + * *******用户信息采集，同时声明 Zwlog 对象实例
  10 + * uerId 用户 ID 没登录就非必填，登录了必填
  11 + */
  12 +export function initZwlog () {
  13 + zwlog = new ZwLog({
  14 + _user_id: localStorage.getItem('centerNo'),
  15 + _user_nick: localStorage.getItem('_user_nick')
  16 + });
  17 +}
  18 +
  19 +/*
  20 + * *******PV 日志参数- global_args
  21 + * url 页面路径 【选填】（未传参默认获取当前路由地址）
  22 + * enterPageTime 【必填】（默认在路由改变的时候自动获取时间） 进入页面的时间 new Date()
  23 + * leavePageTime 【必填】（默认在路由改变的时候自动获取时间） 离开页面的时间 new Date()
  24 + * loadTime【必填】（页面onShow中获取当前时间） 加载完的时间 new Date()
  25 + * responseTime 【必填】（页面onShow的nextTick中获取当前时间） 响应完的时间 new Date()
  26 + */
  27 +export function zwlogPvGlobal ({
  28 + url = null,
  29 + enterPageTime = null,
  30 + leavePageTime = null,
  31 + loadTime = null,
  32 + responseTime = null
  33 +} = {}) {
  34 + console.log('调用zwlogPvGlobal')
  35 + if (!zwlog) initZwlog();
  36 + let path = url || getCurRoute();
  37 + if (!pageLogMap.hasOwnProperty(path))
  38 + pageLogMap[path] = {
  39 + enterPageTime: null,
  40 + leavePageTime: null,
  41 + loadTime: null,
  42 + responseTime: null,
  43 + };
  44 +
  45 + if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime;
  46 + if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime;
  47 + if (loadTime) pageLogMap[path].loadTime = loadTime;
  48 + if (responseTime) pageLogMap[path].responseTime = responseTime;
  49 +
  50 + console.log("zheliban === " + path, pageLogMap[path]);
  51 +
  52 + if (
  53 + pageLogMap[path].enterPageTime &&
  54 + pageLogMap[path].leavePageTime &&
  55 + pageLogMap[path].loadTime &&
  56 + pageLogMap[path].responseTime
  57 + ) {
  58 + /*
  59 + * miniAppId 应用开发管理 平台 appId
  60 + * miniAppName 应用开发管理 平台应用名称
  61 + * log_status 用户登录状态 （01:未登录/ 02:单点登录）
  62 + * Page_duration 浏览时长 用户从进入到离开当 前页面的时长
  63 + * t2 页面加载时间 页面启动到加载完成 的时间
  64 + * t0 页面响应时间 页面启动到页面响应 完成的时间
  65 + * pageId 应用页面 ID
  66 + * pageName 应用页面名称
  67 + */
  68 + let Page_duration =
  69 + pageLogMap[path].leavePageTime.getTime() -
  70 + pageLogMap[path].enterPageTime.getTime();
  71 + let t2 =
  72 + pageLogMap[path].loadTime.getTime() -
  73 + pageLogMap[path].enterPageTime.getTime();
  74 + let t0 =
  75 + pageLogMap[path].responseTime.getTime() -
  76 + pageLogMap[path].enterPageTime.getTime();
  77 + setTimeout(() => {
  78 + let pvParams = {
  79 + miniAppId: "2001895516",
  80 + miniAppName: "红色网上游",
  81 + log_status: "2001895516",
  82 + Page_duration: Page_duration / 1000 + "秒",
  83 + t2: t2 / 1000 + "秒",
  84 + t0: t0 / 1000 + "秒",
  85 + pageId: path,
  86 + pageName: getNavigationBarTitleText(),
  87 + };
  88 + zwlog.onReady(function () {
  89 + console.log('zwlog onReady')
  90 + zwlog.sendPV(pvParams);
  91 + delete pageLogMap[path];
  92 + });
  93 + }, 500);
  94 + } else {
  95 + let result = "";
  96 + for (let k in pageLogMap[path]) {
  97 + if (!pageLogMap[path][k]) result += k + "，";
  98 + }
  99 + console.log("zheliban === 浙里办页面" + path + "埋点缺少参数=>>", result);
  100 + }
  101 +}
  102 +// 获取页面的导航title
  103 +function getNavigationBarTitleText () {
  104 + // let pages = getCurrentPages();
  105 + // let page = pages[pages.length - 1];
  106 + // let title = page.$holder.navigationBarTitleText;
  107 + // console.log("zheliban === getNavigationBarTitleText title=", title);
  108 + return document.title;
  109 +}
  110 +
  111 +// 点击事件的埋点
  112 +export function zwlogRecord ({ code = "" } = {}) {
  113 + if (!zwlog) initZwlog();
  114 + let path = getCurRoute();
  115 + zwlog.onReady(function () {
  116 + zwlog.record({
  117 + trackerEventCode: `${code}`,
  118 + eventType: "OTHER",
  119 + eventParams: {
  120 + pageId: path, //采用页面路径，也可以自己给每个页面设置一个pageId
  121 + pageName: getNavigationBarTitleText(),
  122 + },
  123 + });
  124 + });
  125 +}
  126 +
  127 +
  128 +let getCurRoute = () => {
  129 + // let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
  130 + // let curRoute = routes[routes.length - 1].route; // 获取当前页面路由，也就是最后一个打开的页面路由
  131 + // console.log("curRoute", curRoute);
  132 +
  133 + return '/';
  134 +};
0 \ No newline at end of file 135 \ No newline at end of file
@@ -18,8 +18,8 @@ import yxAxios from &#39;@/https/yxAxios&#39; @@ -18,8 +18,8 @@ import yxAxios from &#39;@/https/yxAxios&#39;
18 Vue.prototype.yxAxios = yxAxios; 18 Vue.prototype.yxAxios = yxAxios;
19 Vue.prototype.dialog = Dialog; 19 Vue.prototype.dialog = Dialog;
20 20
21 -import { mgop } from '@aligov/jssdk-mgop';  
22 -Vue.prototype.mgop = mgop; 21 +import {zwlogPvGlobal} from './common/zwUtil.js'
  22 +Vue.prototype.$zwlogPvGlobal = zwlogPvGlobal;
23 23
24 import common from './common/index' 24 import common from './common/index'
25 Vue.prototype.common = common; 25 Vue.prototype.common = common;
src/views/Home/Home.vue
  Diff comments   View file @12bbfcc
@@ -96,6 +96,10 @@ export default { @@ -96,6 +96,10 @@ export default {
96 }, 96 },
97 97
98 mounted() { 98 mounted() {
  99 + this.$zwlogPvGlobal({ loadTime: new Date() })
  100 + this.$nextTick(() => {
  101 + this.$zwlogPvGlobal({ responseTime: new Date() })
  102 + })
99 const isElder = localStorage.getItem('isElder') 103 const isElder = localStorage.getItem('isElder')
100 if (isElder) { 104 if (isElder) {
101 this.isElder = true 105 this.isElder = true
@@ -193,8 +197,8 @@ export default { @@ -193,8 +197,8 @@ export default {
193 localStorage.removeItem('centerNo') 197 localStorage.removeItem('centerNo')
194 setTimeout(() => { 198 setTimeout(() => {
195 const sUserAgent = window.navigator.userAgent.toLowerCase() 199 const sUserAgent = window.navigator.userAgent.toLowerCase()
196 - const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1  
197 - const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1 200 + const dtdreamweb = sUserAgent.indexOf('dtdreamweb') > -1
  201 + const miniprogram = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1
198 if (miniprogram) { 202 if (miniprogram) {
199 // alert('支付宝') 203 // alert('支付宝')
200 window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc` 204 window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`
src/views/Service/ServiceKQ.vue
  Diff comments   View file @12bbfcc
@@ -12,7 +12,6 @@ export default { @@ -12,7 +12,6 @@ export default {
12 centerNo: '', 12 centerNo: '',
13 } 13 }
14 }, 14 },
15 -  
16 mounted() { 15 mounted() {
17 console.log('xst mounted') 16 console.log('xst mounted')
18 this.checkAuth() 17 this.checkAuth()
@@ -127,13 +126,13 @@ export default { @@ -127,13 +126,13 @@ export default {
127 // }) 126 // })
128 // } else { 127 // } else {
129 // localStorage.setItem('reloadCount', 2) 128 // localStorage.setItem('reloadCount', 2)
130 - if (miniprogram) {  
131 - // alert('支付宝')  
132 - window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`  
133 - } else {  
134 - // alert('浙里办')  
135 - window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc`  
136 - } 129 + if (miniprogram) {
  130 + // alert('支付宝')
  131 + window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=82a7a71edb794fc285895f9e33290ddc`
  132 + } else {
  133 + // alert('浙里办')
  134 + window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=82a7a71edb794fc285895f9e33290ddc`
  135 + }
137 // } 136 // }
138 }, 137 },
139 // 获取用户信息 138 // 获取用户信息
@@ -143,8 +142,14 @@ export default { @@ -143,8 +142,14 @@ export default {
143 this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => { 142 this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => {
144 console.log('获取用户信息getPortalUserByNum:', res) 143 console.log('获取用户信息getPortalUserByNum:', res)
145 if (res.data.code == 200) { 144 if (res.data.code == 200) {
146 - localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))  
147 - this.userInfo = res.data.data.userInfo 145 + let userInfo = res.data.data.userInfo
  146 + localStorage.setItem('userInfo', JSON.stringify(userInfo))
  147 + this.userInfo = userInfo
  148 + localStorage.setItem('_user_nick', userInfo.travelerName)
  149 + this.$zwlogPvGlobal({ loadTime: new Date() })
  150 + this.$nextTick(() => {
  151 + this.$zwlogPvGlobal({ responseTime: new Date() })
  152 + })
148 } 153 }
149 }) 154 })
150 }, 155 },
src/views/Yanxue/achievementsOne.vue
  Diff comments   View file @12bbfcc
1 <template> 1 <template>
2 - <div class="cardBox">  
3 - <!-- <van-tabs v-model="tabsName"> 2 + <div class="cardBox">
  3 + <!-- <van-tabs v-model="tabsName">
4 <van-tab title="红色教育"></van-tab> 4 <van-tab title="红色教育"></van-tab>
5 <van-tab title="劳动教育"></van-tab> 5 <van-tab title="劳动教育"></van-tab>
6 <van-tab title="课外实践"></van-tab> 6 <van-tab title="课外实践"></van-tab>
7 <van-tab title="研学旅行"></van-tab> 7 <van-tab title="研学旅行"></van-tab>
8 </van-tabs> --> 8 </van-tabs> -->
9 - <van-tabs v-model="sort" @click="tabsClick">  
10 - <van-tab title="发布时间">发布时间</van-tab>  
11 - <van-tab title="点赞量">点赞量</van-tab>  
12 - <van-tab title="阅读量">阅读量</van-tab>  
13 - </van-tabs>  
14 - <div class="contextBox" v-if="newsList.length != 0" @load="getData">  
15 - <van-list  
16 - v-model="loading"  
17 - :finished="finished"  
18 - finished-text="没有更多了"  
19 - @load="getData"  
20 - >  
21 - <div  
22 - class="art_card_pic"  
23 - v-for="(v, i) in newsList"  
24 - :key="i"  
25 - @click="toDetails(v)"  
26 - >  
27 - <div class="art_context">  
28 - <div class="art_title">{{ v.titleDesc }}</div>  
29 - <div class="art_bot">  
30 - <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->  
31 - <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->  
32 - <div class="greyTime">  
33 - 点赞量 {{ v.likeNumber }}  
34 - </div>  
35 - <div class="greyFont">  
36 - 浏览量 {{ v.readNumber }}  
37 - </div>  
38 - </div>  
39 - </div>  
40 - <div class="art_pic">  
41 - <img :src="v.imgUrl" />  
42 - </div>  
43 - </div>  
44 - </van-list>  
45 - <!-- <div 9 + <van-tabs v-model="sort" @click="tabsClick">
  10 + <van-tab title="发布时间">发布时间</van-tab>
  11 + <van-tab title="点赞量">点赞量</van-tab>
  12 + <van-tab title="阅读量">阅读量</van-tab>
  13 + </van-tabs>
  14 + <div class="contextBox" v-if="newsList.length != 0" @load="getData">
  15 + <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
  16 + <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v)">
  17 + <div class="art_context">
  18 + <div class="art_title">{{ v.titleDesc }}</div>
  19 + <div class="art_bot">
  20 + <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->
  21 + <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->
  22 + <div class="greyTime">点赞量 {{ v.likeNumber }}</div>
  23 + <div class="greyFont">浏览量 {{ v.readNumber }}</div>
  24 + </div>
  25 + </div>
  26 + <div class="art_pic">
  27 + <img :src="v.imgUrl" />
  28 + </div>
  29 + </div>
  30 + </van-list>
  31 + <!-- <div
46 class="art_card_pic" 32 class="art_card_pic"
47 v-for="(v, i) in newsList" 33 v-for="(v, i) in newsList"
48 :key="i" 34 :key="i"
@@ -59,224 +45,223 @@ @@ -59,224 +45,223 @@
59 <img :src="v.imgUrl" /> 45 <img :src="v.imgUrl" />
60 </div> 46 </div>
61 </div> --> 47 </div> -->
62 - </div>  
63 -  
64 - <van-empty description="暂无数据" v-else /> 48 + </div>
65 49
66 - <div class="imgPic" @click="toChoose">  
67 - <img src="@/assets/changeSchool.png" />  
68 - </div> 50 + <van-empty description="暂无数据" v-else />
69 51
70 - <tabbar4 active="fruit"></tabbar4> 52 + <div class="imgPic" @click="toChoose">
  53 + <img src="@/assets/changeSchool.png" />
71 </div> 54 </div>
  55 +
  56 + <tabbar4 active="fruit"></tabbar4>
  57 + </div>
72 </template> 58 </template>
73 59
74 <script> 60 <script>
75 -import Tabbar4 from "@/component/Tabbar4"; 61 +import Tabbar4 from '@/component/Tabbar4'
76 export default { 62 export default {
77 - components: { Tabbar4 },  
78 - data() {  
79 - return {  
80 - tabsName: 1,  
81 - newsList: [],  
82 - pageNum: 1,  
83 - pageSize: 10,  
84 - finished: false,  
85 - loading: false,  
86 - sort: 0  
87 - }; 63 + components: { Tabbar4 },
  64 + data() {
  65 + return {
  66 + tabsName: 1,
  67 + newsList: [],
  68 + pageNum: 1,
  69 + pageSize: 10,
  70 + finished: false,
  71 + loading: false,
  72 + sort: 0,
  73 + }
  74 + },
  75 + methods: {
  76 + //详情新闻
  77 + toDetails(v) {
  78 + this.$router.push({
  79 + name: 'pageDetails',
  80 + query: { schoolId: v.schoolId, dataId: v.id },
  81 + })
88 }, 82 },
89 - methods: {  
90 - //详情新闻  
91 - toDetails(v) {  
92 - this.$router.push({  
93 - name: "pageDetails",  
94 - query: { schoolId: v.schoolId, dataId: v.id },  
95 - });  
96 - },  
97 - //选择  
98 - toChoose() {  
99 - this.$router.push({ name: "chooseSchoolOne" });  
100 - },  
101 - tabsClick() {  
102 - this.newsList = []  
103 - this.pageNum = 1  
104 - this.pageSize = 10  
105 - this.getData()  
106 - },  
107 - getData() {  
108 - this.loading = true;  
109 - let schoolId = this.$route.query.schoolId  
110 - ? this.$route.query.schoolId  
111 - : "";  
112 -  
113 - this.yxAxios  
114 - .get(  
115 - `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +  
116 - schoolId + `&sort=` + this.sort  
117 - )  
118 - .then((res) => {  
119 - if (res.data.code == 200) {  
120 - this.newsList = this.newsList.concat(  
121 - res.data.data.list  
122 - );  
123 - this.loading = false;  
124 - if (  
125 - this.pageSize * this.pageNum >=  
126 - res.data.data.total  
127 - ) {  
128 - this.finished = true;  
129 - } else {  
130 - this.pageNum++;  
131 - }  
132 - } else {  
133 - this.$toast.fail(res.data.message);  
134 - }  
135 - });  
136 - // this.yxAxios  
137 - // .post(`${this.dataUrl}/sys/yx/consultList`, {  
138 - // page: 1,  
139 - // pageSize: 999,  
140 - // schoolId: this.$route.query.schoolId*1  
141 - // })  
142 - // .then((res) => {  
143 - // if (res.data.success) {  
144 - // this.newsList = res.data.data.list;  
145 - // } else {  
146 - // this.$toast.fail(res.data.message);  
147 - // }  
148 - // });  
149 - }, 83 + //选择
  84 + toChoose() {
  85 + this.$router.push({ name: 'chooseSchoolOne' })
150 }, 86 },
151 - mounted() {  
152 - this.getData(); 87 + tabsClick() {
  88 + this.newsList = []
  89 + this.pageNum = 1
  90 + this.pageSize = 10
  91 + this.getData()
153 }, 92 },
154 -}; 93 + getData() {
  94 + this.loading = true
  95 + let schoolId = this.$route.query.schoolId ? this.$route.query.schoolId : ''
  96 +
  97 + this.yxAxios
  98 + .get(
  99 + `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +
  100 + schoolId +
  101 + `&sort=` +
  102 + this.sort
  103 + )
  104 + .then((res) => {
  105 + if (res.data.code == 200) {
  106 + this.newsList = this.newsList.concat(res.data.data.list)
  107 + this.loading = false
  108 + if (this.pageSize * this.pageNum >= res.data.data.total) {
  109 + this.finished = true
  110 + } else {
  111 + this.pageNum++
  112 + }
  113 + } else {
  114 + this.$toast.fail(res.data.message)
  115 + }
  116 + })
  117 + // this.yxAxios
  118 + // .post(`${this.dataUrl}/sys/yx/consultList`, {
  119 + // page: 1,
  120 + // pageSize: 999,
  121 + // schoolId: this.$route.query.schoolId*1
  122 + // })
  123 + // .then((res) => {
  124 + // if (res.data.success) {
  125 + // this.newsList = res.data.data.list;
  126 + // } else {
  127 + // this.$toast.fail(res.data.message);
  128 + // }
  129 + // });
  130 + },
  131 + },
  132 + mounted() {
  133 + this.getData()
  134 + this.$zwlogPvGlobal({ loadTime: new Date() })
  135 + this.$nextTick(() => {
  136 + this.$zwlogPvGlobal({ responseTime: new Date() })
  137 + })
  138 + },
  139 +}
155 </script> 140 </script>
156 141
157 <style lang="scss" scoped> 142 <style lang="scss" scoped>
158 .cardBox { 143 .cardBox {
159 - padding: 2vw 0;  
160 - box-sizing: border-box; 144 + padding: 2vw 0;
  145 + box-sizing: border-box;
161 146
162 - .contextBox {  
163 - margin-top: 20px;  
164 - margin-bottom: 140px;  
165 - .art_card {  
166 - padding: 28px;  
167 - box-sizing: border-box;  
168 -  
169 - .art_title {  
170 - width: 100%;  
171 - font-size: 34px;  
172 - font-weight: bold;  
173 - display: -webkit-box;  
174 - -webkit-box-orient: vertical;  
175 - -webkit-line-clamp: 1; //限制行数  
176 - overflow: hidden; //超出部分隐藏  
177 - text-overflow: ellipsis; //用一个省略号代替超出的内容  
178 - } 147 + .contextBox {
  148 + margin-top: 20px;
  149 + margin-bottom: 140px;
  150 + .art_card {
  151 + padding: 28px;
  152 + box-sizing: border-box;
179 153
180 - .art_bot {  
181 - padding-top: 22px;  
182 - box-sizing: border-box;  
183 - display: flex;  
184 - align-items: center; 154 + .art_title {
  155 + width: 100%;
  156 + font-size: 34px;
  157 + font-weight: bold;
  158 + display: -webkit-box;
  159 + -webkit-box-orient: vertical;
  160 + -webkit-line-clamp: 1; //限制行数
  161 + overflow: hidden; //超出部分隐藏
  162 + text-overflow: ellipsis; //用一个省略号代替超出的内容
  163 + }
185 164
186 - .redSticky {  
187 - color: #ff4444;  
188 - font-size: 24px;  
189 - padding: 2px;  
190 - box-sizing: border-box;  
191 - border: 1px solid #ff4444;  
192 - } 165 + .art_bot {
  166 + padding-top: 22px;
  167 + box-sizing: border-box;
  168 + display: flex;
  169 + align-items: center;
193 170
194 - .greyTime {  
195 - color: #999;  
196 - font-size: 24px;  
197 - margin: 0 20px;  
198 - } 171 + .redSticky {
  172 + color: #ff4444;
  173 + font-size: 24px;
  174 + padding: 2px;
  175 + box-sizing: border-box;
  176 + border: 1px solid #ff4444;
  177 + }
199 178
200 - .greyFont {  
201 - color: #999;  
202 - font-size: 24px;  
203 - }  
204 - } 179 + .greyTime {
  180 + color: #999;
  181 + font-size: 24px;
  182 + margin: 0 20px;
205 } 183 }
206 - .art_card_pic {  
207 - padding: 28px;  
208 - box-sizing: border-box;  
209 - display: flex;  
210 - justify-content: space-between;  
211 184
212 - .art_context {  
213 - height: 180px;  
214 - display: flex;  
215 - align-content: space-between;  
216 - flex-wrap: wrap; 185 + .greyFont {
  186 + color: #999;
  187 + font-size: 24px;
  188 + }
  189 + }
  190 + }
  191 + .art_card_pic {
  192 + padding: 28px;
  193 + box-sizing: border-box;
  194 + display: flex;
  195 + justify-content: space-between;
217 196
218 - .art_title {  
219 - width: 100%;  
220 - font-size: 34px;  
221 - font-weight: bold;  
222 - display: -webkit-box;  
223 - -webkit-box-orient: vertical;  
224 - -webkit-line-clamp: 2; //限制行数  
225 - overflow: hidden; //超出部分隐藏  
226 - text-overflow: ellipsis; //用一个省略号代替超出的内容  
227 - } 197 + .art_context {
  198 + height: 180px;
  199 + display: flex;
  200 + align-content: space-between;
  201 + flex-wrap: wrap;
228 202
229 - .art_bot {  
230 - padding-top: 22px;  
231 - box-sizing: border-box;  
232 - display: flex;  
233 - align-items: center; 203 + .art_title {
  204 + width: 100%;
  205 + font-size: 34px;
  206 + font-weight: bold;
  207 + display: -webkit-box;
  208 + -webkit-box-orient: vertical;
  209 + -webkit-line-clamp: 2; //限制行数
  210 + overflow: hidden; //超出部分隐藏
  211 + text-overflow: ellipsis; //用一个省略号代替超出的内容
  212 + }
234 213
235 - .redSticky {  
236 - color: #ff4444;  
237 - font-size: 24px;  
238 - padding: 2px;  
239 - box-sizing: border-box;  
240 - border: 1px solid #ff4444;  
241 - } 214 + .art_bot {
  215 + padding-top: 22px;
  216 + box-sizing: border-box;
  217 + display: flex;
  218 + align-items: center;
242 219
243 - .greyTime {  
244 - color: #999;  
245 - font-size: 24px;  
246 - margin: 0;  
247 - } 220 + .redSticky {
  221 + color: #ff4444;
  222 + font-size: 24px;
  223 + padding: 2px;
  224 + box-sizing: border-box;
  225 + border: 1px solid #ff4444;
  226 + }
248 227
249 - .greyFont {  
250 - color: #999;  
251 - font-size: 24px;  
252 - margin-left: 20px;  
253 - }  
254 - }  
255 - }  
256 - .art_pic {  
257 - width: 180px;  
258 - height: 180px;  
259 - flex-shrink: 0;  
260 - background-color: #ff4444; 228 + .greyTime {
  229 + color: #999;
  230 + font-size: 24px;
  231 + margin: 0;
  232 + }
261 233
262 - img {  
263 - width: 100%;  
264 - height: 100%;  
265 - }  
266 - } 234 + .greyFont {
  235 + color: #999;
  236 + font-size: 24px;
  237 + margin-left: 20px;
  238 + }
267 } 239 }
268 - }  
269 - .imgPic {  
270 - position: fixed;  
271 - right: 2vw;  
272 - bottom: 40vw;  
273 - width: 26vw;  
274 - height: 26vw; 240 + }
  241 + .art_pic {
  242 + width: 180px;
  243 + height: 180px;
  244 + flex-shrink: 0;
  245 + background-color: #ff4444;
275 246
276 img { 247 img {
277 - width: 100%;  
278 - height: 100%; 248 + width: 100%;
  249 + height: 100%;
279 } 250 }
  251 + }
  252 + }
  253 + }
  254 + .imgPic {
  255 + position: fixed;
  256 + right: 2vw;
  257 + bottom: 40vw;
  258 + width: 26vw;
  259 + height: 26vw;
  260 +
  261 + img {
  262 + width: 100%;
  263 + height: 100%;
280 } 264 }
  265 + }
281 } 266 }
282 -</style>  
283 \ No newline at end of file 267 \ No newline at end of file
  268 +</style>
src/views/answerRank/stars.vue
  Diff comments   View file @12bbfcc
1 <template> 1 <template>
2 - <div class="bck">  
3 - <div class="box">  
4 - <div class="box_L">  
5 - <div class="L_top">  
6 - <div class="pic">  
7 - <img src="@/assets/rank/tx.png" />  
8 - </div>  
9 - <div class="font_box">  
10 - <div class="font_name" @click="switchUser">  
11 - {{ user.travelerName }}  
12 - <img src="@/assets/rank/qh1.png" />  
13 - </div>  
14 - <div class="font_sch">{{ user.schoolName }}</div>  
15 - </div>  
16 - </div>  
17 - <div class="L_mid">  
18 - <div class="mid_item">  
19 - <div>  
20 - <span class="strong_font">{{  
21 - scoreObj.scoreTotal  
22 - }}</span>  
23 - <span>分</span>  
24 - </div>  
25 - <div class="grey_font">已完成题数</div>  
26 - </div>  
27 - <div class="mid_item">  
28 - <div>  
29 - <span class="strong_font">{{ scoreObj.rate }}</span>  
30 - <span>%</span>  
31 - </div>  
32 - <div class="grey_font">正确率</div>  
33 - </div>  
34 - </div>  
35 - <div class="yellowFont">*积分可用于兑换各种福利</div>  
36 - </div>  
37 -  
38 - <div class="box_R">  
39 - <div class="box_R_item" @click="toRank">  
40 - <div class="title">  
41 - <div>排行榜</div>  
42 - <span>RANKS</span>  
43 - </div>  
44 - <div class="imgBox">  
45 - <img src="@/assets/rank/jb.png" />  
46 - </div>  
47 - </div>  
48 - <div class="box_R_item" @click="toRecord">  
49 - <div class="title">  
50 - <div>刷题记录</div>  
51 - <span>RECORD</span>  
52 - </div>  
53 - <div class="imgBox">  
54 - <img src="@/assets/rank/qz.png" />  
55 - </div>  
56 - </div> 2 + <div class="bck">
  3 + <div class="box">
  4 + <div class="box_L">
  5 + <div class="L_top">
  6 + <div class="pic">
  7 + <img src="@/assets/rank/tx.png" />
  8 + </div>
  9 + <div class="font_box">
  10 + <div class="font_name" @click="switchUser">
  11 + {{ user.travelerName }}
  12 + <img src="@/assets/rank/qh1.png" />
57 </div> 13 </div>
  14 + <div class="font_sch">{{ user.schoolName }}</div>
  15 + </div>
58 </div> 16 </div>
59 -  
60 - <div class="card">  
61 - <div class="picBox" @click="toYanxue">  
62 - <img src="@/assets/rank/wxsn.png" /> 17 + <div class="L_mid">
  18 + <div class="mid_item">
  19 + <div>
  20 + <span class="strong_font">{{ scoreObj.scoreTotal }}</span>
  21 + <span>分</span>
63 </div> 22 </div>
64 -  
65 - <div class="flexBox" v-for="(v, i) in libraryList" :key="i">  
66 - <div class="tipPic">  
67 - <!-- <img :src="v.imgUrl" /> -->  
68 - <img v-if="v.type == 1" src="@/assets/rank/qt.png" />  
69 - <img v-if="v.type == 2" src="@/assets/rank/hj.png" />  
70 - <img v-if="v.type == 3" src="@/assets/rank/bj.png" />  
71 - </div>  
72 - <div class="context">  
73 - <div class="context_title" v-if="v.type == 1">青铜级</div>  
74 - <div class="context_title" v-if="v.type == 2">黄金级</div>  
75 - <div class="context_title" v-if="v.type == 3">白金级</div>  
76 - <div class="context_grey">{{ v.text }}</div>  
77 - </div>  
78 - <div class="btnBox">  
79 - <div class="btn" @click="toAns(v)">开始答题</div>  
80 - </div> 23 + <div class="grey_font">已完成题数</div>
  24 + </div>
  25 + <div class="mid_item">
  26 + <div>
  27 + <span class="strong_font">{{ scoreObj.rate }}</span>
  28 + <span>%</span>
81 </div> 29 </div>
  30 + <div class="grey_font">正确率</div>
  31 + </div>
  32 + </div>
  33 + <div class="yellowFont">*积分可用于兑换各种福利</div>
  34 + </div>
  35 +
  36 + <div class="box_R">
  37 + <div class="box_R_item" @click="toRank">
  38 + <div class="title">
  39 + <div>排行榜</div>
  40 + <span>RANKS</span>
  41 + </div>
  42 + <div class="imgBox">
  43 + <img src="@/assets/rank/jb.png" />
  44 + </div>
82 </div> 45 </div>
83 - <tabbar4 active="yanxue"></tabbar4> 46 + <div class="box_R_item" @click="toRecord">
  47 + <div class="title">
  48 + <div>刷题记录</div>
  49 + <span>RECORD</span>
  50 + </div>
  51 + <div class="imgBox">
  52 + <img src="@/assets/rank/qz.png" />
  53 + </div>
  54 + </div>
  55 + </div>
84 </div> 56 </div>
  57 +
  58 + <div class="card">
  59 + <div class="picBox" @click="toYanxue">
  60 + <img src="@/assets/rank/wxsn.png" />
  61 + </div>
  62 +
  63 + <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
  64 + <div class="tipPic">
  65 + <!-- <img :src="v.imgUrl" /> -->
  66 + <img v-if="v.type == 1" src="@/assets/rank/qt.png" />
  67 + <img v-if="v.type == 2" src="@/assets/rank/hj.png" />
  68 + <img v-if="v.type == 3" src="@/assets/rank/bj.png" />
  69 + </div>
  70 + <div class="context">
  71 + <div class="context_title" v-if="v.type == 1">青铜级</div>
  72 + <div class="context_title" v-if="v.type == 2">黄金级</div>
  73 + <div class="context_title" v-if="v.type == 3">白金级</div>
  74 + <div class="context_grey">{{ v.text }}</div>
  75 + </div>
  76 + <div class="btnBox">
  77 + <div class="btn" @click="toAns(v)">开始答题</div>
  78 + </div>
  79 + </div>
  80 + </div>
  81 + <tabbar4 active="yanxue"></tabbar4>
  82 + </div>
85 </template> 83 </template>
86 84
87 <script> 85 <script>
88 -import Tabbar4 from "@/component/Tabbar4"; 86 +import Tabbar4 from '@/component/Tabbar4'
89 export default { 87 export default {
90 - components: {  
91 - Tabbar4,  
92 - },  
93 - data() {  
94 - return {  
95 - libraryList: [  
96 - {  
97 - name: "青铜级",  
98 - type: "1",  
99 - text: "夯实基础，稳步前进",  
100 - imgUrl: require("@/assets/rank/qt.png"),  
101 - },  
102 - {  
103 - name: "黄金级",  
104 - type: "2",  
105 - text: "夯实基础，稳步前进",  
106 - imgUrl: require("@/assets/rank/hj.png"),  
107 - },  
108 - {  
109 - name: "白金级",  
110 - type: "3",  
111 - text: "夯实基础，稳步前进",  
112 - imgUrl: require("@/assets/rank/bj.png"),  
113 - },  
114 - ],  
115 - userInfo: {},  
116 - user: {  
117 - travelerName: "",  
118 - travelerNum: 0,  
119 - schoolName: "",  
120 - },  
121 - //答题人-正确率  
122 - scoreObj: {  
123 - rate: 0,  
124 - scoreTotal: 0,  
125 - },  
126 - };  
127 - },  
128 - methods: {  
129 - //获取用户信息  
130 - getUser() {  
131 - this.userInfo = JSON.parse(localStorage.getItem("userInfo"));  
132 -  
133 - if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) {  
134 - return this.$toast.fail("暂无绑定出行人");  
135 - }  
136 -  
137 - //选择了用户  
138 - if (this.$route.query.index) {  
139 - let index = this.$route.query.index;  
140 - localStorage.setItem(  
141 - "travelerNum",  
142 - this.userInfo.subUsers[index].travelerNum  
143 - );  
144 - this.user = {  
145 - travelerNum: this.userInfo.subUsers[index].travelerNum,  
146 - travelerName: this.userInfo.subUsers[index].travelerName,  
147 - schoolName: this.userInfo.subUsers[index].schoolName,  
148 - };  
149 - this.getscoreInfo();  
150 - return;  
151 - }  
152 - //未选择用户 - 默认第一个  
153 -  
154 - localStorage.setItem(  
155 - "travelerNum",  
156 - this.userInfo.subUsers[0].travelerNum  
157 - );  
158 -  
159 - this.user = {  
160 - travelerNum: this.userInfo.subUsers[0].travelerNum,  
161 - travelerName: this.userInfo.subUsers[0].travelerName,  
162 - schoolName: this.userInfo.subUsers[0].schoolName,  
163 - };  
164 - this.getscoreInfo(); 88 + components: {
  89 + Tabbar4,
  90 + },
  91 + data() {
  92 + return {
  93 + libraryList: [
  94 + {
  95 + name: '青铜级',
  96 + type: '1',
  97 + text: '夯实基础，稳步前进',
  98 + imgUrl: require('@/assets/rank/qt.png'),
165 }, 99 },
166 - //切换用户  
167 - switchUser() {  
168 - this.$router.push({  
169 - name: "switchUser",  
170 - }); 100 + {
  101 + name: '黄金级',
  102 + type: '2',
  103 + text: '夯实基础，稳步前进',
  104 + imgUrl: require('@/assets/rank/hj.png'),
171 }, 105 },
172 - //进入题库  
173 - toAns(val) {  
174 - this.$router.push({  
175 - name: "category",  
176 - query: {  
177 - categoryId: val.itemCategoryId,  
178 - index: this.$route.query.index,  
179 - type: val.type,  
180 - },  
181 - }); 106 + {
  107 + name: '白金级',
  108 + type: '3',
  109 + text: '夯实基础，稳步前进',
  110 + imgUrl: require('@/assets/rank/bj.png'),
182 }, 111 },
183 - //进入刷题记录  
184 - toRecord() {  
185 - this.$router.push({  
186 - name: "brush_questions",  
187 - query: {  
188 - index: this.$route.query.index,  
189 - },  
190 - }); 112 + ],
  113 + userInfo: {},
  114 + user: {
  115 + travelerName: '',
  116 + travelerNum: 0,
  117 + schoolName: '',
  118 + },
  119 + //答题人-正确率
  120 + scoreObj: {
  121 + rate: 0,
  122 + scoreTotal: 0,
  123 + },
  124 + }
  125 + },
  126 + methods: {
  127 + //获取用户信息
  128 + getUser() {
  129 + this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
  130 +
  131 + if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) {
  132 + return this.$toast.fail('暂无绑定出行人')
  133 + }
  134 +
  135 + //选择了用户
  136 + if (this.$route.query.index) {
  137 + let index = this.$route.query.index
  138 + localStorage.setItem('travelerNum', this.userInfo.subUsers[index].travelerNum)
  139 + this.user = {
  140 + travelerNum: this.userInfo.subUsers[index].travelerNum,
  141 + travelerName: this.userInfo.subUsers[index].travelerName,
  142 + schoolName: this.userInfo.subUsers[index].schoolName,
  143 + }
  144 + this.getscoreInfo()
  145 + return
  146 + }
  147 + //未选择用户 - 默认第一个
  148 +
  149 + localStorage.setItem('travelerNum', this.userInfo.subUsers[0].travelerNum)
  150 +
  151 + this.user = {
  152 + travelerNum: this.userInfo.subUsers[0].travelerNum,
  153 + travelerName: this.userInfo.subUsers[0].travelerName,
  154 + schoolName: this.userInfo.subUsers[0].schoolName,
  155 + }
  156 + this.getscoreInfo()
  157 + },
  158 + //切换用户
  159 + switchUser() {
  160 + this.$router.push({
  161 + name: 'switchUser',
  162 + })
  163 + },
  164 + //进入题库
  165 + toAns(val) {
  166 + this.$router.push({
  167 + name: 'category',
  168 + query: {
  169 + categoryId: val.itemCategoryId,
  170 + index: this.$route.query.index,
  171 + type: val.type,
191 }, 172 },
192 - //进入排行榜  
193 - toRank() {  
194 - this.$router.push({  
195 - name: "ans_rank",  
196 - query: {  
197 - index: this.$route.query.index,  
198 - },  
199 - }); 173 + })
  174 + },
  175 + //进入刷题记录
  176 + toRecord() {
  177 + this.$router.push({
  178 + name: 'brush_questions',
  179 + query: {
  180 + index: this.$route.query.index,
200 }, 181 },
201 - //用户答题信息  
202 - getscoreInfo() {  
203 - this.yxAxios  
204 - .get(  
205 - `${  
206 - this.kqUrl  
207 - }/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem(  
208 - "travelerNum"  
209 - )}`  
210 - )  
211 - .then((res) => {  
212 - if (res.data.code == 200) {  
213 - this.scoreObj = res.data.data;  
214 - } else {  
215 - this.$toast.fail(res.data.message);  
216 - }  
217 - }); 182 + })
  183 + },
  184 + //进入排行榜
  185 + toRank() {
  186 + this.$router.push({
  187 + name: 'ans_rank',
  188 + query: {
  189 + index: this.$route.query.index,
218 }, 190 },
219 - toYanxue() {  
220 - this.$router.push({ name: 'YanxuePage' }) 191 + })
  192 + },
  193 + //用户答题信息
  194 + getscoreInfo() {
  195 + this.yxAxios.get(`${this.kqUrl}/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem('travelerNum')}`).then((res) => {
  196 + if (res.data.code == 200) {
  197 + this.scoreObj = res.data.data
  198 + } else {
  199 + this.$toast.fail(res.data.message)
221 } 200 }
  201 + })
222 }, 202 },
223 - mounted() {  
224 - this.getUser(); 203 + toYanxue() {
  204 + this.$router.push({ name: 'YanxuePage' })
225 }, 205 },
226 -}; 206 + },
  207 + mounted() {
  208 + this.getUser()
  209 + this.$zwlogPvGlobal({ loadTime: new Date() })
  210 + this.$nextTick(() => {
  211 + this.$zwlogPvGlobal({ responseTime: new Date() })
  212 + })
  213 + },
  214 +}
227 </script> 215 </script>
228 216
229 <style lang="scss" scoped> 217 <style lang="scss" scoped>
230 .bck { 218 .bck {
231 - position: absolute;  
232 - width: 100vw;  
233 - height: 30vh;  
234 - background-image: url("../../assets/rank/wx_back.png");  
235 - -moz-background-size: 100% 100%;  
236 - background-size: 100% 100%;  
237 -  
238 - .box { 219 + position: absolute;
  220 + width: 100vw;
  221 + height: 30vh;
  222 + background-image: url('../../assets/rank/wx_back.png');
  223 + -moz-background-size: 100% 100%;
  224 + background-size: 100% 100%;
  225 +
  226 + .box {
  227 + display: flex;
  228 + justify-content: space-between;
  229 + margin: 5vw 3vw 8vw;
  230 +
  231 + .box_L {
  232 + width: 45vw;
  233 + height: 360px;
  234 + background-color: #fff;
  235 + border-radius: 30px;
  236 + padding: 3vw 2vw;
  237 + box-sizing: border-box;
  238 + display: flex;
  239 + flex-wrap: wrap;
  240 + align-content: space-between;
  241 + border: 1px solid #ff6868;
  242 +
  243 + .L_top {
  244 + width: 100%;
239 display: flex; 245 display: flex;
240 justify-content: space-between; 246 justify-content: space-between;
241 - margin: 5vw 3vw 8vw;  
242 -  
243 - .box_L {  
244 - width: 45vw;  
245 - height: 360px;  
246 - background-color: #fff;  
247 - border-radius: 30px;  
248 - padding: 3vw 2vw;  
249 - box-sizing: border-box;  
250 - display: flex;  
251 - flex-wrap: wrap;  
252 - align-content: space-between;  
253 - border: 1px solid #ff6868;  
254 -  
255 - .L_top {  
256 - width: 100%;  
257 - display: flex;  
258 - justify-content: space-between;  
259 -  
260 - .pic {  
261 - display: flex;  
262 - align-items: center;  
263 -  
264 - img {  
265 - width: 13vw;  
266 - height: 13vw;  
267 - }  
268 - }  
269 - .font_box {  
270 - width: 25vw;  
271 - display: flex;  
272 - align-content: space-between;  
273 - flex-wrap: wrap;  
274 -  
275 - .font_name {  
276 - font-size: 30px;  
277 - color: #333333;  
278 -  
279 - img {  
280 - margin-top: 5px;  
281 - width: 30px;  
282 - height: 25px;  
283 - }  
284 - }  
285 - .font_sch {  
286 - font-size: 27px;  
287 - color: #999;  
288 - white-space: nowrap; //文本强制不换行；  
289 - text-overflow: ellipsis; //文本溢出显示省略号；  
290 - overflow: hidden; //溢出的部分隐藏；  
291 - }  
292 - }  
293 - }  
294 247
295 - .L_mid {  
296 - width: 100%;  
297 - display: flex;  
298 - justify-content: space-between;  
299 -  
300 - .mid_item {  
301 - width: 100%;  
302 - text-align: center;  
303 - font-size: 25px;  
304 -  
305 - .grey_font {  
306 - color: #999;  
307 - font-size: 25px;  
308 - margin-top: 5px;  
309 - }  
310 -  
311 - .strong_font {  
312 - font-size: 50px;  
313 - font-weight: bold;  
314 - }  
315 - }  
316 - } 248 + .pic {
  249 + display: flex;
  250 + align-items: center;
317 251
318 - .yellowFont {  
319 - width: 100%;  
320 - font-size: 24px;  
321 - color: #ff7a1c;  
322 - text-align: center;  
323 - } 252 + img {
  253 + width: 13vw;
  254 + height: 13vw;
  255 + }
324 } 256 }
325 - .box_R {  
326 - width: 45vw;  
327 - height: 360px;  
328 - display: flex;  
329 - flex-wrap: wrap;  
330 - align-content: space-between;  
331 -  
332 - .box_R_item {  
333 - width: 100%;  
334 - height: 165px;  
335 - border-radius: 30px;  
336 - display: flex;  
337 - justify-content: space-between;  
338 - padding: 20px 30px;  
339 - box-sizing: border-box;  
340 - background-color: #fff;  
341 -  
342 - .title {  
343 - font-size: 30px;  
344 - color: #000000;  
345 -  
346 - span {  
347 - color: #999999;  
348 - font-size: 22px;  
349 - }  
350 - }  
351 -  
352 - .imgBox {  
353 - display: flex;  
354 - align-items: center;  
355 -  
356 - img {  
357 - width: 110px;  
358 - height: 110px;  
359 - }  
360 - } 257 + .font_box {
  258 + width: 25vw;
  259 + display: flex;
  260 + align-content: space-between;
  261 + flex-wrap: wrap;
  262 +
  263 + .font_name {
  264 + font-size: 30px;
  265 + color: #333333;
  266 +
  267 + img {
  268 + margin-top: 5px;
  269 + width: 30px;
  270 + height: 25px;
361 } 271 }
  272 + }
  273 + .font_sch {
  274 + font-size: 27px;
  275 + color: #999;
  276 + white-space: nowrap; //文本强制不换行；
  277 + text-overflow: ellipsis; //文本溢出显示省略号；
  278 + overflow: hidden; //溢出的部分隐藏；
  279 + }
362 } 280 }
363 - } 281 + }
364 282
365 - .card { 283 + .L_mid {
366 width: 100%; 284 width: 100%;
367 - min-height: 800px;  
368 - background-color: #fff; 285 + display: flex;
  286 + justify-content: space-between;
  287 +
  288 + .mid_item {
  289 + width: 100%;
  290 + text-align: center;
  291 + font-size: 25px;
  292 +
  293 + .grey_font {
  294 + color: #999;
  295 + font-size: 25px;
  296 + margin-top: 5px;
  297 + }
  298 +
  299 + .strong_font {
  300 + font-size: 50px;
  301 + font-weight: bold;
  302 + }
  303 + }
  304 + }
  305 +
  306 + .yellowFont {
  307 + width: 100%;
  308 + font-size: 24px;
  309 + color: #ff7a1c;
  310 + text-align: center;
  311 + }
  312 + }
  313 + .box_R {
  314 + width: 45vw;
  315 + height: 360px;
  316 + display: flex;
  317 + flex-wrap: wrap;
  318 + align-content: space-between;
  319 +
  320 + .box_R_item {
  321 + width: 100%;
  322 + height: 165px;
369 border-radius: 30px; 323 border-radius: 30px;
370 - padding: 5vw 3vw; 324 + display: flex;
  325 + justify-content: space-between;
  326 + padding: 20px 30px;
371 box-sizing: border-box; 327 box-sizing: border-box;
  328 + background-color: #fff;
372 329
373 - .picBox {  
374 - width: 100%;  
375 - margin-bottom: 30px; 330 + .title {
  331 + font-size: 30px;
  332 + color: #000000;
376 333
377 - img {  
378 - width: 100%;  
379 - height: 100%;  
380 - } 334 + span {
  335 + color: #999999;
  336 + font-size: 22px;
  337 + }
381 } 338 }
382 339
383 - .flexBox {  
384 - display: flex;  
385 - justify-content: space-between;  
386 - padding: 5vw 3vw;  
387 - box-sizing: border-box;  
388 - border-bottom: 1px solid #f1f1f1;  
389 -  
390 - .tipPic {  
391 - width: 15vw;  
392 - img {  
393 - width: 16vw;  
394 - height: 16vw;  
395 - }  
396 - }  
397 - .context {  
398 - display: flex;  
399 - align-content: space-between;  
400 - flex-wrap: wrap;  
401 - padding: 5px 0;  
402 - box-sizing: border-box;  
403 - margin-left: 5vw;  
404 -  
405 - .context_title {  
406 - width: 100%;  
407 - font-size: 36px;  
408 - color: #333333;  
409 - }  
410 - .context_grey {  
411 - font-size: 30px;  
412 - color: #999999;  
413 - }  
414 - }  
415 - .btnBox {  
416 - display: flex;  
417 - justify-content: flex-end;  
418 - align-items: center;  
419 -  
420 - .btn {  
421 - width: 180px;  
422 - height: 70px;  
423 - background-color: #fff2f2;  
424 - color: #ff6868;  
425 - padding: 10px 30px;  
426 - box-sizing: border-box;  
427 - font-size: 28px;  
428 - border-radius: 30px;  
429 - text-align: center;  
430 - }  
431 - } 340 + .imgBox {
  341 + display: flex;
  342 + align-items: center;
  343 +
  344 + img {
  345 + width: 110px;
  346 + height: 110px;
  347 + }
  348 + }
  349 + }
  350 + }
  351 + }
  352 +
  353 + .card {
  354 + width: 100%;
  355 + min-height: 800px;
  356 + background-color: #fff;
  357 + border-radius: 30px;
  358 + padding: 5vw 3vw;
  359 + box-sizing: border-box;
  360 +
  361 + .picBox {
  362 + width: 100%;
  363 + margin-bottom: 30px;
  364 +
  365 + img {
  366 + width: 100%;
  367 + height: 100%;
  368 + }
  369 + }
  370 +
  371 + .flexBox {
  372 + display: flex;
  373 + justify-content: space-between;
  374 + padding: 5vw 3vw;
  375 + box-sizing: border-box;
  376 + border-bottom: 1px solid #f1f1f1;
  377 +
  378 + .tipPic {
  379 + width: 15vw;
  380 + img {
  381 + width: 16vw;
  382 + height: 16vw;
  383 + }
  384 + }
  385 + .context {
  386 + display: flex;
  387 + align-content: space-between;
  388 + flex-wrap: wrap;
  389 + padding: 5px 0;
  390 + box-sizing: border-box;
  391 + margin-left: 5vw;
  392 +
  393 + .context_title {
  394 + width: 100%;
  395 + font-size: 36px;
  396 + color: #333333;
  397 + }
  398 + .context_grey {
  399 + font-size: 30px;
  400 + color: #999999;
  401 + }
  402 + }
  403 + .btnBox {
  404 + display: flex;
  405 + justify-content: flex-end;
  406 + align-items: center;
  407 +
  408 + .btn {
  409 + width: 180px;
  410 + height: 70px;
  411 + background-color: #fff2f2;
  412 + color: #ff6868;
  413 + padding: 10px 30px;
  414 + box-sizing: border-box;
  415 + font-size: 28px;
  416 + border-radius: 30px;
  417 + text-align: center;
432 } 418 }
  419 + }
433 } 420 }
  421 + }
434 } 422 }
435 -</style>  
436 \ No newline at end of file 423 \ No newline at end of file
  424 +</style>