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 2 <html lang="en">
3 3  
4 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 14 </head>
57 15  
58 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 24 </body>
70 25  
71 26 </html>
72 27 \ No newline at end of file
... ...
public/zwlogJS接入.html
  Diff comments   View file @12bbfcc
... ... @@ -17,9 +17,11 @@
17 17 _user_id: "用户ID",
18 18 _user_nick: "用户昵称"
19 19 })
  20 + console.log(2222)
20 21  
21 22 //onReady表示zwlog加载完成后的函数，它接收一个匿名函数，而sendPV与record方法均要在匿名函数内调用。eg:
22 23 zwlog.onReady(function () {
  24 + console.log(1111)
23 25 //PV日志
24 26 zwlog.sendPV({
25 27 miniAppId: 'IRS服务侧应用appid',
... ...
src/App.vue
  Diff comments   View file @12bbfcc
... ... @@ -11,8 +11,17 @@ export default {
11 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 24 mounted() {
15   - // new vConsole()
16 25 ZWJSBridge.onReady(() => {
17 26 console.log('初始化完成后，执行bridge方法')
18 27 })
... ...
src/common/zwUtil.js 0 → 100644
  Diff comments   View file @12bbfcc
... ... @@ -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 135 \ No newline at end of file
... ...
src/main.js
  Diff comments   View file @12bbfcc
... ... @@ -18,8 +18,8 @@ import yxAxios from &#39;@/https/yxAxios&#39;
18 18 Vue.prototype.yxAxios = yxAxios;
19 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 24 import common from './common/index'
25 25 Vue.prototype.common = common;
... ...
src/views/Home/Home.vue
  Diff comments   View file @12bbfcc
... ... @@ -96,6 +96,10 @@ export default {
96 96 },
97 97  
98 98 mounted() {
  99 + this.$zwlogPvGlobal({ loadTime: new Date() })
  100 + this.$nextTick(() => {
  101 + this.$zwlogPvGlobal({ responseTime: new Date() })
  102 + })
99 103 const isElder = localStorage.getItem('isElder')
100 104 if (isElder) {
101 105 this.isElder = true
... ... @@ -193,8 +197,8 @@ export default {
193 197 localStorage.removeItem('centerNo')
194 198 setTimeout(() => {
195 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 202 if (miniprogram) {
199 203 // alert('支付宝')
200 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 12 centerNo: '',
13 13 }
14 14 },
15   -
16 15 mounted() {
17 16 console.log('xst mounted')
18 17 this.checkAuth()
... ... @@ -127,13 +126,13 @@ export default {
127 126 // })
128 127 // } else {
129 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 142 this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => {
144 143 console.log('获取用户信息getPortalUserByNum:', res)
145 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 1 <template>
2   - <div class="cardBox">
3   - <!-- <van-tabs v-model="tabsName">
  2 + <div class="cardBox">
  3 + <!-- <van-tabs v-model="tabsName">
4 4 <van-tab title="红色教育"></van-tab>
5 5 <van-tab title="劳动教育"></van-tab>
6 6 <van-tab title="课外实践"></van-tab>
7 7 <van-tab title="研学旅行"></van-tab>
8 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 32 class="art_card_pic"
47 33 v-for="(v, i) in newsList"
48 34 :key="i"
... ... @@ -59,224 +45,223 @@
59 45 <img :src="v.imgUrl" />
60 46 </div>
61 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 54 </div>
  55 +
  56 + <tabbar4 active="fruit"></tabbar4>
  57 + </div>
72 58 </template>
73 59  
74 60 <script>
75   -import Tabbar4 from "@/component/Tabbar4";
  61 +import Tabbar4 from '@/component/Tabbar4'
76 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 140 </script>
156 141  
157 142 <style lang="scss" scoped>
158 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 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 267 \ No newline at end of file
  268 +</style>
... ...
src/views/answerRank/stars.vue
  Diff comments   View file @12bbfcc
1 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 13 </div>
  14 + <div class="font_sch">{{ user.schoolName }}</div>
  15 + </div>
58 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 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 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 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 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 83 </template>
86 84  
87 85 <script>
88   -import Tabbar4 from "@/component/Tabbar4";
  86 +import Tabbar4 from '@/component/Tabbar4'
89 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 215 </script>
228 216  
229 217 <style lang="scss" scoped>
230 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 245 display: flex;
240 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 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 323 border-radius: 30px;
370   - padding: 5vw 3vw;
  324 + display: flex;
  325 + justify-content: space-between;
  326 + padding: 20px 30px;
371 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 423 \ No newline at end of file
  424 +</style>
... ...