hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-08 02:16:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

案例优化页面UI调整

Browse Source
This commit is contained in:
zhangsir
2024-09-04 16:32:11 +08:00
parent 019ba29b03
commit 9ef5b5a6a3
10 changed files with 442 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/browse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 689 B

BIN
public/images/collect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 665 B

BIN
public/images/headerBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
public/images/list01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/images/listred01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 957 B

4
src/assets/styles/portal.scss
View File

@@ -110,7 +110,7 @@ body {margin: 0px;padding: 0px;}
padding-bottom:12px
}
.ranking-data{
min-height: 246px;
min-height: 196px;
margin: 0px;
overflow-y: auto;
}
@@ -130,7 +130,7 @@ body {margin: 0px;padding: 0px;}
padding-bottom:12px
}
.ranking-data{
min-height: 246px;
min-height: 196px;
margin: 0px;
// overflow-y: auto;
}

10
src/components/Portal/authorInfo.vue
View File

@@ -121,12 +121,12 @@
margin-left: 4px;
}
.comWords {
color: #999;
font-size: 12px;
background: #409EFF;
border-radius: 2px;
padding: 2px 14px;
margin-left: 20px;
background-color: bisque;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
padding: 3px 10px 4px 8px;
}
.uavatar{
// border: 1px solid #73adfe;

165
src/views/portal/case/Charts.vue
View File

@@ -1,47 +1,72 @@
<template>
<div class="charts">
<div class="charts_header">
排行榜
<portal-header textColor="#fff"></portal-header>
<div class="text">
排行榜
</div>
</div>
<div class="charts_content">
<div class="charts_item">
<div class="charts_item_box">
<div class="charts_item_box charts_bg1">
<div class="charts_text">
<div class="text">好评榜</div>
<div>季度</div>
<el-dropdown trigger="click" @command="positiveReview">
<span class="el-dropdown-link">
{{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="charts_list">
<li v-for="(item, index) in Positive" :key="index" class="list">
<router-link :to="'/case/detail?id=' + item.id">
<span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
<span>{{ item.title }}</span>
<router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
<img class="num" :src="require(
`../../../../public/images/${imgNumBlue(index)}.png`
)" alt="">
<span class="text">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
<div class="charts_item_box">
<div class="charts_item_box charts_bg2">
<div class="charts_text">
<div class="text">人气榜</div>
<div>季度</div>
<el-dropdown trigger="click" @command="popularityReview">
<span class="el-dropdown-link">
{{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="charts_list">
<li v-for="(item, index) in Popularity" :key="index" class="list">
<router-link :to="'/case/detail?id=' + item.id">
<span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
<span>{{ item.title }}</span>
<router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
<img class="num" :src="require(
`../../../../public/images/${imgNumOrg(index)}.png`
)" alt="">
<span class="text">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
<div class="charts_item_box">
<div class="charts_item_box charts_bg3">
<div class="charts_text">
<div class="text">推荐榜</div>
</div>
<ul class="charts_list">
<li v-for="(item, index) in Positive" :key="index" class="list">
<router-link :to="'/case/detail?id=' + item.id">
<span class="num" :style="{color:listTextColor(index)}">{{ index + 1}}</span>
<span>{{ item.title }}</span>
<router-link style="display: flex;align-items: center;" :to="'/case/detail?id=' + item.id">
<img class="num" :src="require(
`../../../../public/images/${imgNumPink(index)}.png`
)" alt="">
<span class="text">{{ item.title }}</span>
</router-link>
</li>
</ul>
@@ -53,14 +78,21 @@
<script>
import apiCase from "@/api/modules/cases.js";
import portalHeader from '@/components/PortalHeader.vue'
export default {
name: 'charts',
components:{portalHeader},
data() {
return {
ankingList: [],//排行数据1
Popularity: [],//排行数据2
Positive: [],//排行数据3
colorList: ['#FF0000','#FFA500','#FFFF00']
switch: {
'total': '总',
'quarter': '季度',
},
favorableName: '季度',
popularityName: '季度',
}
},
mounted() {
@@ -71,48 +103,78 @@ import apiCase from "@/api/modules/cases.js";
getPopularity() {
apiCase.queryPraises(5).then(res => {
if (res.status == 200) {
this.Popularity = res.result;
console.log(this.Popularity,'this.Popularity')
this.Popularity = [...res.result,...res.result];
}
});
},
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
console.log(this.Positive,'this.Positive');
this.Positive = [...res.result,...res.result];
}
});
},
listTextColor(index){
return this.colorList[index]
imgNumBlue(index){
return 'listblue0' + (index+1)
},
imgNumOrg(index){
return (
index>2?'listblue0' + (index+1):'list0'+(index+1)
)
},
imgNumPink(index){
return (
index>2?'listblue0' + (index+1):'listred0'+(index+1)
)
},
positiveReview(e){
this.favorableName = this.switch[e]
},
popularityReview(e){
this.popularityName = this.switch[e]
},
},
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
cursor: pointer;
font-weight: 400;
font-size: 14px;
color: rgba(51,51,51,0.9);
}
.el-icon--right{
margin-left: 13px !important;
}
.charts{
min-height: 100vh;
background-color: #999;
background-color: #F2F5F7;
.charts_header{
font-size: 18px;
background-color: #387DF7;
color: #fff;
height: 72px;
line-height: 72px;
padding-left: 40px;
margin-bottom: 20px;
width: 100%;
// height: 240px;
background: url('../../../../public/images/headerBack.png') no-repeat;
background-size: 100% 100%;
padding-bottom: 37px;
.text{
margin-top: 41px;
font-weight: 400;
font-size: 340%;
color: #FFFFFF;
padding-left: 98px;
}
}
.charts_content{
padding: 52px 91px 58px;
.charts_item{
display: flex;
justify-content: center;
justify-content: space-between;
.charts_item_box{
padding: 10px 20px;
width: 30%;
padding: 30px;
background-color: #fff;
width: 30%;
min-height: 500px;
margin-right: 30px;
.charts_text{
display: flex;
@@ -120,8 +182,8 @@ import apiCase from "@/api/modules/cases.js";
height: 40px;
align-items: center;
.text{
font-size: 18px;
font-weight: 600;
font-size: 24px;
color: #000000;
}
}
.charts_list{
@@ -129,15 +191,40 @@ import apiCase from "@/api/modules/cases.js";
cursor: pointer;
margin-top:30px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.num{
margin-right: 8px;
width: 25px;
height: 30px;
margin-right: 10px;
}
.text{
font-weight: 500;
font-size: 14px;
color: #677D86;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.charts_bg1{
// width: 100%;
height: 100%;
background: url('../../../../public/images/qa-box.png') no-repeat;
background-size: 100% 100%;
}
.charts_bg2{
// width: 100%;
height: 100%;
background: url('../../../../public/images/list-or.png') no-repeat;
background-size: 100% 100%;
}
.charts_bg3{
// width: 100%;
height: 100%;
background: url('../../../../public/images/list-pink.png') no-repeat;
background-size: 100% 100%;
}
}
}
}

149
src/views/portal/case/Excellent.vue
View File

@@ -1,37 +1,42 @@
<template>
<div class="excellent">
<div class="ex_top">
<div class="ex_text">浏览TOP榜单</div>
<div class="ex_select">
<div class="ex_left">
<div style="margin-right: 15px;">
<el-select clearable v-model="majorValue" placeholder="请选择专业">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div>
<el-select clearable v-model="monthValue" placeholder="请选择月份">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="ex_right" @click="goCase">返回</div>
<div class="charts_header">
<portal-header textColor="#fff"></portal-header>
<div class="text">
浏览TOP榜单
</div>
</div>
<div class="ex_content">
<div class="ex_top">
<div class="ex_select">
<div class="ex_left">
<div style="margin-right: 12px;">
<el-select clearable v-model="majorValue" @change="majorChange" placeholder="请选择专业">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div>
<el-select clearable v-model="monthValue" @change="monthChange" placeholder="请选择月份">
<el-option
v-for="item in optionsMonth"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="ex_right" @click="goCase">返回</div>
</div>
</div>
<div v-if="caseList.list.length != 0" class="data-content">
<div v-for="item in caseList.list" :key="item.id" class="case-list">
<div class="case-info">
<div class="case-info" style="padding-bottom: 28px;">
<div class="case-info-cont">
<div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
<div class="case-info-title">
@@ -81,11 +86,11 @@
<div class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
{{ item.summary }}
</div>
<div style="display: flex;justify-content: flex-end;">
<!-- <div style="display: flex;justify-content: flex-end;">
<div style="margin:8px 0;">
<interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -94,8 +99,8 @@
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
</div>
</div>
<div class="pagination-div">
<span class="notcoures" v-if="caseList.list.length == 0">
<div class="pagination-div" v-if="caseList.list.length == 0">
<span class="notcoures">
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
<h5>暂无案例，请优先学习其它案例吧～</h5>
</span>
@@ -150,6 +155,14 @@ import apiPlace from "@/api/phase2/place.js"
value: '选项5',
label: '北京烤鸭'
}],
optionsMonth:
[...Array(12)].map((item,i)=>{
return{
value: i+1,
label: (i+1)+'月'
}
})
,
majorValue: '',
monthValue: '',
caseList: {
@@ -280,6 +293,12 @@ import apiPlace from "@/api/phase2/place.js"
},
},
methods: {
majorChange(e){
},
monthChange(e){
// console.log(e,'xixixix')
},
orgDomainTranslate(code) { // 组织领域翻译
if (code == '') {
return
@@ -484,38 +503,52 @@ import apiPlace from "@/api/phase2/place.js"
}
}
.excellent{
background-color: #999;
background-color: #F2F5F7;
min-height: 100vh;
.ex_top{
background-color: #387df7;
padding: 10px 30px 10px 40px;
margin-bottom: 20px;
.ex_text{
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}
.ex_select{
display: flex;
justify-content: space-between;
align-items: center;
.ex_left{
display: flex;
}
.ex_right{
background-color: #fff;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.charts_header{
width: 100%;
// height: 240px;
background: url('../../../../public/images/headerBack.png') no-repeat;
background-size: 100% 100%;
padding-bottom: 37px;
.text{
margin-top: 41px;
font-weight: 400;
font-size: 340%;
color: #FFFFFF;
padding-left: 98px;
}
}
.ex_content{
width: 80%;
margin: 0 auto;
padding: 31px 90px 103px;
.ex_top{
background-color: #F2F5F7;
margin-bottom: 15px;
.ex_text{
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}
.ex_select{
display: flex;
justify-content: space-between;
align-items: center;
.ex_left{
display: flex;
}
.ex_right{
width: 71px;
height: 38px;
background: #2478FF;
border-radius: 4px;
text-align: center;
line-height: 38px;
cursor: pointer;
color: #fff;
}
}
}
.data-content {
background-color: #fff;
padding: 5px 50px;

307
src/views/portal/case/Index.vue
View File

@@ -154,21 +154,21 @@
<!-- <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
{{ caseList.count }}</span> 条数据</div> -->
<div class="pub_time" @click="searchTime">
<div>发布时间</div>
<div class="text">发布时间</div>
<div class="triangle">
<div :style="{borderBottomColor:pubTimeNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pubTimeNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
<div :style="{borderBottomColor:pubTimeNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pubTimeNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<div class="pub_time" @click="searchPageView">
<div>浏览量</div>
<div class="text">浏览量</div>
<div class="triangle">
<div :style="{borderBottomColor:pageViewNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pageViewNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
<div :style="{borderBottomColor:pageViewNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pageViewNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<el-select v-model="years" multiple collapse-tags
style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
style=" width: 147px; border-radius:20px !important;" placeholder="全部年份">
<el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
@@ -182,9 +182,11 @@
</div>
</div>
</div>
<div class="search_div_num">
当前已检索 <span style="color:#f00;">
{{ caseList.count }}</span> 条数据
<div class="back_num">
<div class="search_div_num">
当前已检索 <span style="color:#FF4040 ;">
{{ caseList.count }}</span> 条数据
</div>
</div>
<div class="data-content">
<div v-for="item in caseList.list" :key="item.id" class="case-list">
@@ -201,7 +203,9 @@
<span v-if="item.breCommend" class="comWords"
style="background-color:rgba(232, 139, 72);">荐</span>
<span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span>
<span class="comWords" style="background-color:orange">2024年度最佳</span>
<span class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 3px 12px 4px 9px;">
2024年度最佳
</span>
</div>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
@@ -285,7 +289,18 @@
</router-link>
<div id="fixd-box">
<div class="portal-ranking ranking-bg">
<p class="ranking-title">好评榜</p>
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">好评榜</p>
<el-dropdown trigger="click" @command="positiveReview">
<span class="el-dropdown-link">
{{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -299,19 +314,30 @@
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<!-- <span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
</span> -->
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
<div class="portal-ranking ranking-bg1" style="margin-top:26px">
<p class="ranking-title">人气榜</p>
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">人气榜</p>
<el-dropdown trigger="click" @command="popularityReview">
<span class="el-dropdown-link">
{{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -336,26 +362,20 @@
</li>
</ul>
</div>
<div class="portal-ranking ranking-bg" style="margin-top:26px">
<div class="portal-ranking ranking-bg2" style="margin-top:26px">
<p class="ranking-title">推荐榜</p>
<ul class="ranking-data">
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
<router-link :to="'/case/detail?id=' + item.id">
<span class="portal-right-text blue-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
<img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
</span>
<span class="portal-right-text blue-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
<img :src="`${webBaseUrl}/images/listred02.png`" alt="">
</span>
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
<img :src="`${webBaseUrl}/images/listred03.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
@@ -458,6 +478,12 @@ export default {
},
data() {
return {
switch: {
'total': '总',
'quarter': '季度',
},
favorableName: '季度',
popularityName: '季度',
pubTimeNum: 0,
pageViewNum: 0,
twoId:'',
@@ -796,6 +822,12 @@ export default {
},
methods: {
positiveReview(e){
this.favorableName = this.switch[e]
},
popularityReview(e){
this.popularityName = this.switch[e]
},
handleType(msg){
this.queryCondition.type = msg
},
@@ -1111,14 +1143,14 @@ export default {
// }
// });
// },
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
console.log(res);
}
});
},
// getPositive() {
// apiCase.queryComments(5).then(res => {
// if (res.status == 200) {
// this.Positive = res.result;
// console.log(res);
// }
// });
// },
// 无用
async getdomain() {
let key = "org_domain";
@@ -1554,17 +1586,17 @@ export default {
getPopularity() {
apiCase.queryPraises(5).then(res => {
if (res.status == 200) {
this.Popularity = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Popularity.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
}
this.Popularity = res.result.slice(0,3);
// if (res.result.length < 5) {
// for (let i = 0; i = (5 - res.result.length); i++) {
// this.Popularity.push({
// authorName: '',
// count: 1,
// id: '',
// title: '',
// })
// }
// }
}
});
@@ -1572,18 +1604,18 @@ export default {
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Positive.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
this.Positive = res.result.slice(0,3);
// if (res.result.length < 5) {
// for (let i = 0; i = (5 - res.result.length); i++) {
// this.Positive.push({
// authorName: '',
// count: 1,
// id: '',
// title: '',
// })
// }
}
// }
}
});
},
@@ -1597,17 +1629,38 @@ export default {
</script>
<style scoped lang="scss">
.el-dropdown-link {
cursor: pointer;
font-weight: 400;
font-size: 14px;
color: rgba(51,51,51,0.9);
}
.el-icon--right{
margin-left: 14px !important;
}
.the_charts{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 18px;
max-width: 400px;
min-width: 300px;
height: 67px;
background: #DDEDFF;
border-radius: 8px;
.text{
margin-right: 20px;
font-size: 18px;
color: #387DF7;
}
.icon{
position: absolute;
font-size: 18px;
color: #387DF7;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
@@ -2198,96 +2251,172 @@ export default {
// margin-bottom: ;
.pub_time{
display: flex;
margin-right: 15px;
margin-right: 25px;
align-items: center;
cursor: pointer;
.text{
font-size: 14px;
color: #333333;
}
.triangle{
margin-left: 5px;
.up-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #DCDFE6;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #DCDFE6;
margin-bottom: 2px;
}
.down-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #DCDFE6;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #DCDFE6;
}
}
}
.time{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
border-radius: 4px;
// background: #04243C;
&:hover{
background: #387DF7;
.text{
color: #fff;
}
}
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/browse.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #6E7B84;
font-size: 14px;
color: #333333;
}
}
.time::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #04243C;
opacity: 0.05;
z-index: 1;
border-radius: 4px;
}
.time_active{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
background: #387DF7;
border-radius: 4px;
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time_active.png') no-repeat;
background: url('../../../../public/images/browse.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #387DF7;
font-size: 14px;
color: #fff;
}
}
.collect{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
border-radius: 4px;
// background: #04243C;
&:hover{
background: #387DF7;
.text{
color: #fff;
}
}
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/collect.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #6E7B84;
font-size: 14px;
color: #333333;
}
}
.collect::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #04243C;
opacity: 0.05;
z-index: 1;
border-radius: 4px;
}
.collect_active{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
background: #387DF7;
border-radius: 4px;
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect_active.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/collect.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #387DF7;
font-size: 14px;
color: #fff;
}
}
}
.search_div_num{
height: 26px;
.back_num{
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
background-color: deepskyblue;
color: #387DF7;
padding: 0 40px;
.search_div_num{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 38px;
background: #DDEDFF;
border-radius: 4px;
border: 1px solid #387DF7;
color: #387DF7;
}
}
.data-content {
background-color: #fff;