751 lines
20 KiB
Vue
751 lines
20 KiB
Vue
<template>
|
||
|
||
<headTop :num1=num1 :num2=num2 />
|
||
<div style="background: #DEF6FF; ">
|
||
<div style="background: #06247A;">
|
||
<div :style="dynamicStyle">
|
||
<div style="display: flex;" >
|
||
<div :style="style1" @click="changeinfo('开始投票')">开始投票</div>
|
||
<div :style="style2" @click="changeinfo('线上排名')">线上排名</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;align-items: center;margin-top: 12px;" v-if="1>2" >
|
||
<div :style="dynamicStyle1" >
|
||
<div style="display: flex;" >
|
||
<div :style="style3" @click="changeinfo('图文类投稿')">图文类投稿</div>
|
||
<div :style="style4" @click="changeinfo('视频类投稿')">视频类投稿</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;margin-top: 12px;align-items: center;justify-content: center;margin-left: 16px;margin-right: 16px;"
|
||
v-show="voting">
|
||
<div class="text1">*每个视频每天限投1票</div>
|
||
<div class="divsearch">
|
||
<van-image width="20" height="20" :src=search style="margin-left: 12px;" />
|
||
<input placeholder="搜索作者、医院、名称或编号" type="text" v-model="inputValue" @input="debouncedInputHandler()">
|
||
</div>
|
||
</div>
|
||
<div v-if="(istuwen&&list.length>0)||(!istuwen&&listvideo.length>0)||needrequestdata">
|
||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||
<van-list
|
||
v-model:loading="loading"
|
||
:finished="finished"
|
||
finished-text=""
|
||
@load="onLoad"
|
||
>
|
||
<div v-for="(item,$index) of list" :key="item.article_id" v-if="istuwen">
|
||
<div v-if="voting" class="litme">
|
||
<div class="numberss" v-if="$index==0" :style=Style11>{{ item.article_number }}</div>
|
||
<div class="numberss" v-else-if="$index==1" :style=Style12>{{ item.article_number }}</div>
|
||
<div class="numberss" v-else-if="$index==2" :style=Style13>{{ item.article_number }}</div>
|
||
<div class="numberss" v-else :style=Style14>{{ item.article_number }}</div>
|
||
<div style="display: flex;margin-top: 6px;padding-bottom: 16px;align-items: center;">
|
||
<div class="letfdiv" @click="gotoDetails(item.article_id,item.article_title,item.article_author)">
|
||
<div class="title">{{ item.article_title }}</div>
|
||
<div>
|
||
<div class='name'>
|
||
<div v-for="auther in item.article_author">
|
||
<div>{{ auther.author_name}} {{ auther.hospital_name }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightdiv" >
|
||
<div class="title">{{item.vote_num}}票</div>
|
||
<div>
|
||
<div class='toubg' :style="{background:'linear-gradient( 180deg, #D8D8D8 0%, #959595 100%)'}" v-if="item.is_vote">
|
||
投票
|
||
</div>
|
||
<div class='toubg' :style="{background:'linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%)'}" @click="vote(item.article_id,$index)" v-else>
|
||
投票
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="litmev">
|
||
|
||
<div style="display: flex;align-items: center;width: 100%;">
|
||
<div class="numbers" v-if="item.rank==1" :style=Style1 ></div>
|
||
<div class="numbers" v-else-if="item.rank==2" :style=Style2 ></div>
|
||
<div class="numbers" v-else-if="item.rank==3" :style=Style3></div>
|
||
<div class="numbers1" v-else >{{ item.rank}}</div>
|
||
<div style="display: flex;align-items: center;flex: 1;">
|
||
<div class="letfdiv" @click="gotoDetails(item.article_id,item.article_title,item.article_author)">
|
||
<div class="title">{{ item.article_title }}</div>
|
||
<div>
|
||
<div class='name'>
|
||
<div v-for="auther in item.article_author" style="display: flex;align-items: center;">
|
||
<van-image
|
||
v-if="auther.author_avatar"
|
||
:src="auther.author_avatar"
|
||
width="40"
|
||
round
|
||
style="margin-right: 8px;"
|
||
/>
|
||
<div>{{ auther.author_name}}<br/>{{ auther.hospital_name }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightdiv">
|
||
<div class="toubg1">{{item.vote_num}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div v-for="(item,$index) of listvideo" :key="item.video_id" v-else>
|
||
<div v-if="voting" class="litme">
|
||
|
||
<div class="numberss" v-if="$index==0" :style=Style11>{{ item.video_number }}</div>
|
||
<div class="numberss" v-else-if="$index==1" :style=Style12>{{ item.video_number }}</div>
|
||
<div class="numberss" v-else-if="$index==2" :style=Style13>{{ item.video_number }}</div>
|
||
<div class="numberss" v-else :style=Style14>{{ item.video_number }}</div>
|
||
<div style="display: flex;margin-top: 6px;padding-bottom: 16px;align-items: center;">
|
||
<div class="letfdiv" @click="gotoDetails(item.video_id ,item.video_title,item.video_author)">
|
||
<div class="title">{{ item.video_title }}</div>
|
||
<div>
|
||
<div class='name'>
|
||
<div v-for="auther in item.video_author">
|
||
<div>{{ auther.author_name}} {{ auther.hospital_name }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightdiv">
|
||
<div class="title">{{item.vote_num}}票</div>
|
||
<div>
|
||
<div class='toubg' :style="{background:'linear-gradient( 180deg, #D8D8D8 0%, #959595 100%)'}" v-if="item.is_vote">
|
||
投票
|
||
</div>
|
||
<div class='toubg' :style="{background:'linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%)'}" @click="vote(item.video_id,$index)" v-else>
|
||
投票
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="litmev">
|
||
|
||
<div style="display: flex;align-items: center;width: 100%;">
|
||
<div class="numbers" v-if="item.rank==1" :style=Style1 ></div>
|
||
<div class="numbers" v-else-if="item.rank==2" :style=Style2 ></div>
|
||
<div class="numbers" v-else-if="item.rank==3" :style=Style3></div>
|
||
<div class="numbers1" v-else >{{ item.rank}}</div>
|
||
<div style="display: flex;align-items: center;flex: 1;">
|
||
|
||
<div class="letfdiv" @click="gotoDetails(item.video_id,item.video_title ,item.video_author)">
|
||
<div class="title">{{ item.video_title }}</div>
|
||
<div>
|
||
<div class='name'>
|
||
<div v-for="auther in item.video_author" style="display: flex;align-items: center;">
|
||
<van-image
|
||
v-if="auther.author_avatar"
|
||
:src="auther.author_avatar"
|
||
width="40"
|
||
round
|
||
style="margin-right: 8px;"
|
||
/>
|
||
<div>{{ auther.author_name}}<br />{{ auther.hospital_name }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightdiv" >
|
||
<div class="toubg1">{{item.vote_num}}</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
</div>
|
||
<div style="margin-top: 16px;height: 700px;" v-else>
|
||
<van-empty description="暂无数据" />
|
||
</div>
|
||
|
||
<votView :show =show :shows =shows @onchange="handlechange" @onchanges="handlechange" :ticket=tickets ></votView>
|
||
</div>
|
||
</template>
|
||
<script setup >
|
||
import first from '../assets/first.png'
|
||
import second from '../assets/second.png'
|
||
import third from '../assets/third.png'
|
||
import jiesao from '../assets/paiming1.png'
|
||
import toupiao from '../assets/toupiao1.png'
|
||
import tuwen from '../assets/tuwen.png'
|
||
import shipin from '../assets/shipin.png'
|
||
import search from '../assets/search.png'
|
||
import { goAuth } from '../utils/authorize.js'
|
||
import {votedata,browse,articlepage,videopage,rankarticle,rankvideo,votearticle,votevideo} from '../utils/api.js'
|
||
import { useRouter,useRoute } from 'vue-router';
|
||
import { debounce } from 'lodash';
|
||
import { WXSHARE } from '../utils/wxshare-1.6.0';
|
||
import {saveurl} from'../utils/authorize.js'
|
||
const inputValue=ref('');
|
||
const show = ref(false);
|
||
const shows = ref(false);
|
||
const voting = ref(true);
|
||
// const istuwen = ref(true);
|
||
const istuwen = ref(false);//初始化视频
|
||
const num1 = ref(0);
|
||
const num2 = ref(0);
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const needrequestdata = ref(true);
|
||
const Style11 = ref({
|
||
'background': 'linear-gradient( 180deg, #FE1B28 0%, #FD5C65 100%)'
|
||
});
|
||
const Style12 = ref({
|
||
'background': 'linear-gradient( 180deg, #FF6623 0%, #FE824D 100%)'
|
||
});
|
||
const Style13 = ref({
|
||
'background': 'linear-gradient( 180deg, #FEB903 0%, #FEC93D 100%)'
|
||
});
|
||
const Style14 = ref({
|
||
'background': '#F0AA99'
|
||
});
|
||
const Style1 = ref({
|
||
'backgroundImage': 'url(' + first + ')',
|
||
});
|
||
|
||
const Style2 = ref({
|
||
'backgroundImage': 'url(' + second + ')',
|
||
});
|
||
const Style3 = ref({
|
||
'backgroundImage': 'url(' + third + ')',
|
||
});
|
||
const dynamicStyle = ref({
|
||
'backgroundImage':'url('+toupiao+')',
|
||
'height': '48px',
|
||
'background-size': 'cover',
|
||
'background-repeat': 'no-repeat',
|
||
});
|
||
const style1=ref({
|
||
'font-family': 'AlimamaShuHeiTi',
|
||
'font-weight':'bold',
|
||
'font-size': '20px',
|
||
'color': '#0E3564',
|
||
'line-height': '24px',
|
||
'flex': '1',
|
||
'text-align': 'center',
|
||
'margin-top': '11px'
|
||
})
|
||
const style2=ref({
|
||
'font-family': 'AlimamaShuHeiTi',
|
||
'font-weight':'bold',
|
||
'font-size': '20px',
|
||
'color': '#FFFFFF',
|
||
'line-height': '24px',
|
||
'flex': '1',
|
||
'text-align': 'center',
|
||
'margin-top': '16px'
|
||
})
|
||
const dynamicStyle1 = ref({
|
||
'backgroundImage':'url('+tuwen+')',
|
||
'background-size': '100% 100%',
|
||
'height': '40px',
|
||
'width':'344px',
|
||
'background-size': 'contain',
|
||
'background-repeat': 'no-repeat',
|
||
});
|
||
const style3=ref({
|
||
'font-family': 'AlimamaShuHeiTi',
|
||
'font-weight':'bold',
|
||
'font-size': '16px',
|
||
'color': '#FFFFFF',
|
||
'line-height': '40px',
|
||
'flex': '1',
|
||
'text-align': 'center',
|
||
})
|
||
const style4=ref({
|
||
'font-family': 'AlimamaShuHeiTi',
|
||
'font-weight':'bold',
|
||
'font-size': '16px',
|
||
'color': '#07ADEB',
|
||
'line-height': '40px',
|
||
'flex': '1',
|
||
'text-align': 'center',
|
||
})
|
||
|
||
function changeinfo(name){
|
||
|
||
if(name=='开始投票'){
|
||
dynamicStyle.value.backgroundImage = 'url('+toupiao+')'
|
||
style1.value.color='#0E3564'
|
||
style2.value.color='#FFFFFF'
|
||
style1.value.marginTop='11px'
|
||
style2.value.marginTop='16px'
|
||
voting.value=true
|
||
|
||
}else if(name=='线上排名'){
|
||
dynamicStyle.value.backgroundImage = 'url('+jiesao+')'
|
||
style1.value.color='#FFFFFF'
|
||
style2.value.color='#0E3564'
|
||
style1.value.marginTop='16px'
|
||
style2.value.marginTop='11px'
|
||
voting.value=false
|
||
}
|
||
else if(name=='图文类投稿'){
|
||
dynamicStyle1.value.backgroundImage = 'url('+tuwen+')'
|
||
style3.value.color='#FFFFFF'
|
||
style4.value.color='#07ADEB'
|
||
istuwen.value=true
|
||
|
||
}else if(name=='视频类投稿'){
|
||
dynamicStyle1.value.backgroundImage = 'url('+shipin+')'
|
||
|
||
style3.value.color='#07ADEB'
|
||
style4.value.color='#FFFFFF'
|
||
istuwen.value=false
|
||
}
|
||
|
||
|
||
refreshing.value=true;
|
||
onRefresh();
|
||
}
|
||
|
||
|
||
const debouncedInputHandler = debounce(() => {
|
||
// 在这里执行异步操作
|
||
console.log('Input value changed:', inputValue.value);
|
||
refreshing.value=true;
|
||
onRefresh();
|
||
}, 1500);
|
||
const list = ref([]);
|
||
const listvideo = ref([]);
|
||
const loading = ref(false);
|
||
const finished = ref(false);
|
||
const refreshing = ref(false);
|
||
const tickets = ref('');
|
||
const page = ref(1);
|
||
const onLoad = () => {
|
||
|
||
setTimeout(() => {
|
||
|
||
if (refreshing.value) {
|
||
list.value = [];
|
||
listvideo.value = [];
|
||
refreshing.value = false;
|
||
|
||
|
||
}
|
||
if(voting.value)
|
||
{
|
||
if(istuwen.value)
|
||
{
|
||
|
||
gotoarticlepage()
|
||
}
|
||
else
|
||
{
|
||
gotovideopage()
|
||
}
|
||
}
|
||
else{
|
||
|
||
if(istuwen.value)
|
||
{
|
||
gotorankarticle()
|
||
}
|
||
else
|
||
{
|
||
gotorankvideo()
|
||
}
|
||
|
||
}
|
||
|
||
}, 100);
|
||
};
|
||
|
||
const onRefresh = () => {
|
||
needrequestdata.value=true;
|
||
// 清空列表数据
|
||
finished.value = false;
|
||
page.value=1;
|
||
// refreshing.value=true;
|
||
// 重新加载数据
|
||
// 将 loading 设置为 true，表示处于加载状态
|
||
loading.value = true;
|
||
|
||
onLoad();
|
||
};
|
||
|
||
const video_author_t=ref("")
|
||
|
||
function vote(id,index)
|
||
{
|
||
const token=localStorage.getItem('bearer-tokens');
|
||
|
||
if(typeof token === "undefined"||token ==null|| token == ""|| token == "undefined")
|
||
{
|
||
|
||
const ticket= localStorage.getItem('qr-tickets');
|
||
if(typeof ticket === "undefined"||ticket ==null|| ticket == ""|| ticket == "undefined")
|
||
{
|
||
goAuth()
|
||
}
|
||
else
|
||
{
|
||
tickets.value=ticket;
|
||
show.value=true;
|
||
localStorage.setItem('qr-tickets', "");
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
|
||
|
||
if(istuwen.value)
|
||
{
|
||
|
||
votearticle(id).then((data) => {
|
||
console.log("votearticle",data)
|
||
if('200'==data.code)
|
||
{
|
||
shows.value=true;
|
||
list.value[index].vote_num=list.value[index].vote_num+1;
|
||
list.value[index].is_vote=true;
|
||
|
||
// refreshing.value=true;
|
||
// onRefresh();
|
||
}
|
||
else
|
||
{
|
||
showToast(data.message);
|
||
}
|
||
|
||
});
|
||
}
|
||
else
|
||
{
|
||
votevideo(id).then((data) => {
|
||
console.log("votevideo",data)
|
||
if('200'==data.code)
|
||
{
|
||
shows.value=true;
|
||
listvideo.value[index].vote_num=listvideo.value[index].vote_num+1;
|
||
listvideo.value[index].is_vote=true;
|
||
|
||
// refreshing.value=true;
|
||
// onRefresh();
|
||
}
|
||
else
|
||
{
|
||
// showToast(data.massage);
|
||
showToast(data.message+"");
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
}
|
||
function gotoDetails(id,name,video_authors)
|
||
{
|
||
if(istuwen.value)
|
||
{
|
||
router.push({ path: '/articleDetails' ,query:{id:id,name:name}})
|
||
}
|
||
else
|
||
{
|
||
// video_author_t.value=""
|
||
// if(video_authors!=null&&video_authors!='')
|
||
// {
|
||
// video_authors.forEach((auther)=>{
|
||
// video_author_t.value=video_author_t.value+ auther.author_name+"、"
|
||
// })
|
||
// video_author_t.value=video_author_t.value.slice(0, -1);
|
||
// }
|
||
router.push({ path: '/videoDetails' ,query:{id:id,name:name}})
|
||
}
|
||
|
||
}
|
||
function handlechange(){
|
||
show.value = false;
|
||
shows.value = false;
|
||
}
|
||
function initData()
|
||
{
|
||
|
||
votedata().then((data) => {
|
||
console.log("votedata",data)
|
||
num1.value = data.data.view_num
|
||
num2.value = data.data.vote_num
|
||
|
||
});
|
||
|
||
|
||
|
||
}
|
||
function updatBrowse()
|
||
{
|
||
browse().then((data) => {
|
||
console.log("browse",data)
|
||
|
||
|
||
});
|
||
}
|
||
function gotoarticlepage()
|
||
{
|
||
|
||
articlepage(page.value,10,inputValue.value).then((data) => {
|
||
needrequestdata.value=false;
|
||
console.log("articlepage",data)
|
||
loading.value = false;
|
||
|
||
list.value.push(...data.data.data);
|
||
if (data.data.data.length < 10) {
|
||
finished.value = true;
|
||
return;
|
||
}
|
||
page.value++
|
||
|
||
});
|
||
|
||
}
|
||
function gotovideopage()
|
||
{
|
||
videopage(page.value,10,inputValue.value).then((data) => {
|
||
needrequestdata.value=false;
|
||
console.log("videopage",data)
|
||
loading.value = false;
|
||
|
||
listvideo.value.push(...data.data.data);
|
||
if (data.data.data.length < 10) {
|
||
finished.value = true;
|
||
return;
|
||
}
|
||
page.value++
|
||
|
||
});
|
||
|
||
}
|
||
|
||
function gotorankarticle()
|
||
{
|
||
rankarticle().then((data) => {
|
||
needrequestdata.value=false;
|
||
console.log("rankarticle",data)
|
||
loading.value = false;
|
||
finished.value = true;
|
||
list.value.push(...data.data);
|
||
|
||
|
||
});
|
||
|
||
}
|
||
function gotorankvideo()
|
||
{
|
||
rankvideo(page.value,10,inputValue.value).then((data) => {
|
||
needrequestdata.value=false;
|
||
console.log("rankvideo",data)
|
||
loading.value = false;
|
||
finished.value = true;
|
||
listvideo.value.push(...data.data);
|
||
|
||
|
||
|
||
});
|
||
|
||
}
|
||
const Share_PATH = import.meta.env.VITE_SHARE_URL+'home';
|
||
onMounted(() => {
|
||
|
||
initData()
|
||
updatBrowse()
|
||
WXSHARE('2024第九届肝胆英雄榜最具影响力视频投票开始啦！', '就差你一票~助力喜欢的专家或者视频上"肝胆英雄榜"', Share_PATH,"")
|
||
saveurl('/voteList','','')
|
||
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.text1{
|
||
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #0E3564;
|
||
line-height: 17px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
input {
|
||
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
font-size: 12px;
|
||
background: transparent;
|
||
border: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
outline: none;
|
||
flex: 1;
|
||
font-family: PingFangSC, PingFang SC;;
|
||
color: rgba(0,0,0,0.65);
|
||
|
||
|
||
}
|
||
|
||
input:focus {
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
font-size: 12px;
|
||
background: transparent;
|
||
border: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
outline: none;
|
||
flex: 1;
|
||
font-family: PingFangSC, PingFang SC;;
|
||
color: rgba(0,0,0,0.65);
|
||
|
||
}
|
||
.divsearch {
|
||
display: flex;
|
||
flex: 1;
|
||
margin-left: 8px;
|
||
height: 32px;
|
||
background: #FFFFFF;
|
||
border-radius: 21px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
.litme{
|
||
margin: 12px 16px;
|
||
min-height: 109px;
|
||
background: #FFFFFF;
|
||
border-radius: 12px;
|
||
}
|
||
.litmev{
|
||
margin: 12px 16px;
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
min-height: 93px;
|
||
background: #FFFFFF;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.numbers{
|
||
width: 32px;
|
||
height: 36px;
|
||
margin-left: 12px;
|
||
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.65);
|
||
font-weight: bold;
|
||
line-height: 36px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
background-size:cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.numbers1{
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-left: 12px;
|
||
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.65);
|
||
font-weight: bold;
|
||
line-height: 32px;
|
||
border-radius:32px;
|
||
background: #EFEFEF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
background-size:cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.numberss{
|
||
width: 70px;
|
||
height: 30px;
|
||
|
||
border-radius: 12px 0px 16px 0px;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
.title{
|
||
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-size: 16px;
|
||
color: #0E3564;
|
||
line-height: 26px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
.name{
|
||
margin-top: 2px;
|
||
font-family: AlibabaPuHuiTiR;
|
||
font-size: 14px;
|
||
color: #0E3564;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: pre-wrap;
|
||
}
|
||
.letfdiv{
|
||
margin-left: 16px;
|
||
flex: 1;
|
||
}
|
||
.rightdiv{
|
||
margin-right: 16px;
|
||
margin-left: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 50px;
|
||
}
|
||
.toubg1{
|
||
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-size: 20px;
|
||
color: #0BBDFF;
|
||
line-height: 27px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
.toubg{
|
||
margin-top: 5px;
|
||
width: 80px;
|
||
height: 40px;
|
||
/* background: linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%); */
|
||
box-shadow: inset 2px 2px 5px 0px rgba(255,255,255,0.5);
|
||
border-radius: 20px;
|
||
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
line-height: 40px;
|
||
/* text-shadow: 0px 2px 2px #00A9E6; */
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
|
||
|
||
</style> |