695 lines
23 KiB
Vue
695 lines
23 KiB
Vue
<template>
|
||
<div class="main">
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
:visible.sync="integralVisible"
|
||
centered
|
||
width="1250px"
|
||
class="model_class"
|
||
:before-close="IntegralmodalClose"
|
||
>
|
||
<header style="width: 100%;height: 70px;">
|
||
<div class="headerclass">
|
||
<div class="headermain">
|
||
<div :class="['mode-tab', type == 1 ? 'active':'']" @click="typechange(1)">
|
||
<div class="tab-icon">
|
||
<svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
|
||
<use :xlink:href="'#' + (type == 1 ? 'icon-jifen-01':'icon-jf1')" />
|
||
</svg>
|
||
</div>
|
||
<span :class="['tab-title', type == 1 ? 'active':'']">积分充值</span>
|
||
</div>
|
||
<div :class="['mode-tab','solo', type == 2 ? 'active':'']" @click="typechange(2)">
|
||
<div class="tab-icon">
|
||
<svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
|
||
<use :xlink:href="'#' + (type == 2 ? 'icon-jifen-01':'icon-jf1')" />
|
||
</svg>
|
||
<svg class="icon recommend" aria-hidden="true" style="width: 65px;height: 65px;">
|
||
<use xlink:href="#icon-tuijian2" />
|
||
</svg>
|
||
</div>
|
||
<span :class="['tab-title', type == 2 ? 'active':'']">查询包月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="hqpGER">
|
||
<div class="left-container">
|
||
<div class="left-main">
|
||
<div v-if="type == 1">
|
||
<div class="flex-c title">
|
||
积分查询服务内容
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;justify-content:center;">
|
||
<div v-for="(item,i) in integralinfo" :key="i" style="margin-top:15px">
|
||
<i class="circle" />
|
||
<span class="jieshao">{{ item.title }}</span>
|
||
<div v-if="!!item.subtitle" class="bujieshao">
|
||
{{ item.subtitle }}
|
||
</div>
|
||
|
||
</div>
|
||
<div style="color:red;margin-top:10px">
|
||
每月入库安卓机器3000台以上建议使用包月服务
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="flex-c title">
|
||
包月服务内容
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;justify-content:center;">
|
||
<div v-for="(item,i) in monthinfo" :key="i" style="margin-top:15px">
|
||
<i class="circle" />
|
||
<span style="margin-left:10px">{{ item.title }}</span>
|
||
<div v-if="!!item.subtitle" style="font-size:14px;margin-top:10px;color:rgb(93, 111, 143)">
|
||
{{ item.subtitle }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-container">
|
||
<div class="right-main">
|
||
<div style="margin-bottom: 32px;">
|
||
<span class="title">当前积分:{{ aginfo ? aginfo.integral :'' }} <span v-if="type == 2" style="color:#e65555;margin-left:5px">本服务仅对安卓查询有效</span></span>
|
||
<div class="info-title" style="margin:10px">积分规则: 一积分 = 一块钱</div>
|
||
</div>
|
||
<div v-if="type == 1">
|
||
<div class="title" style="margin-bottom: 32px;">购买积分</div>
|
||
<el-row :gutter="24">
|
||
<el-col v-for="(e,i) in combo" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||
<el-card
|
||
class="cardclass"
|
||
shadow="hover"
|
||
:style="{border:(show==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }"
|
||
@click.native.prevent="hidetrue(e)"
|
||
>
|
||
<span class="points">购买{{ e.points }}积分</span>
|
||
<p class="give">赠送{{ e.give }}积分</p>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-else>
|
||
<div class="title" style="margin-bottom: 32px;">购买包月 <span style="color:#e65555;margin-left:5px">反馈新老用户专享8折优惠</span></div>
|
||
<el-row :gutter="24">
|
||
<el-col v-for="(e,i) in monthList" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||
<div class="monthclass" shadow="hover" :style="{border:(monthshow==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }" @click="monthhidetrue(e)">
|
||
<div class="monthmain">
|
||
<i :class="'iconfont ' + e.icon" style="font-size: 20px;" />
|
||
<span style="font-size: 25px;">{{ e.title }}</span>
|
||
<el-badge :value="e.discount" class="item" style="margin-top:10px">
|
||
<h2 style="color:#e65555">￥{{ e.money }}</h2>
|
||
</el-badge>
|
||
<del>￥{{ e.oldmoney }}</del>
|
||
<div class="xianshi">
|
||
<svg class="icon " aria-hidden="true" style="width: 60px;height: 60px;">
|
||
<use xlink:href="#icon-jf2-01" />
|
||
</svg>
|
||
<div class="text">限时</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="margin-top: 90px;font-size: 16px;font-weight: bold;">
|
||
<div v-if="!!aginfo.last_time">
|
||
剩余时间:{{ aginfo ? intervalTime(new Date().getTime(),aginfo.last_time) :'' }}
|
||
</div>
|
||
<div><el-link type="primary" @click="server">开通服务记录</el-link></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-r">
|
||
<div class="title">购买详情</div>
|
||
<div class="flex-b" style="height: 32px;">
|
||
<div class="info-title">方案名称</div>
|
||
<div class="info-value">{{ type == 1 ? '购买积分' :'购买包月' }}</div>
|
||
</div>
|
||
<div class="flex-b" style="height: 32px;">
|
||
<div class="info-title">{{ type == 1 ? '购买积分' :'购买时长' }}</div>
|
||
<div class="info-value">{{ czform['price'] }}</div>
|
||
</div>
|
||
<div v-if="type == 1" class="flex-b" style="height: 32px;">
|
||
<div class="info-title">赠送积分</div>
|
||
<div class="info-value">{{ !!czform['name']?czform['name']:'无' }}</div>
|
||
</div>
|
||
<div v-else class="flex-b" style="height: 32px;">
|
||
<div class="info-title">预计到期</div>
|
||
<div class="info-value">{{ czform['lasttime'] }}</div>
|
||
</div>
|
||
<div class="flex-b" style="height: 32px;">
|
||
<div class="info-title">积分金额</div>
|
||
<div class="info-value">￥{{ czform['price'] }}</div>
|
||
</div>
|
||
<div class="right-bottom">
|
||
<h4 style="margin-top:10px">充值方式</h4>
|
||
<div>
|
||
<el-radio-group v-model="radiovalue">
|
||
<el-radio v-for="(item,i) in radioList" :key="i" style="margin-left:15px" :label="item.value">
|
||
<i :style="item.style" :class="item.icon" />
|
||
{{ item.title }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="flex-b" style="margin-top:10px">
|
||
<span style="font-size: 16px;color: rgb(93, 111, 143);">应付金额:</span>
|
||
<span style="color:#ff6b81;font-size: 24px;">￥{{ czform['price'] }}</span>
|
||
</div>
|
||
<el-button type="primary" style="width:100%;margin-top:2px" :disabled="!checked" @click="IntegralmodalOk">立即购买</el-button>
|
||
<div style="margin-top: 10px;">
|
||
<el-checkbox v-model="checked" style="margin-right:5px" />我已阅读并同意<a target="_blank" style="color: rgb(41, 141, 248);" rel="noopener noreferrer" class="tos" href="https://www.yuque.com/aiguoerp/lcgmke/oa0z3fwethsor57l?singleDoc#">《积分协议》</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="recordList" :close-on-click-modal="false" title="开通服务">
|
||
<el-table
|
||
:data="recordDate"
|
||
style="border-width: 1px 2px 0 2px;border-style: solid solid none solid; border-color: #ebeef5"
|
||
:cell-style="{'text-align':'center'}"
|
||
:header-cell-style="{'text-align':'center','background':'#f9f9fa','color':'#606266'}"
|
||
>
|
||
<el-table-column label="序号" type="index" />
|
||
<el-table-column label="日期" prop="add_time">
|
||
<template #default="{row}">
|
||
{{ row.add_time| dateformat("YYYY-MM-DD") }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="名称" prop="remark" />
|
||
<el-table-column label="时长">
|
||
<template #default="{row}">
|
||
<span>{{ row.months }}个月</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="实付金额" prop="pay_amount" />
|
||
<el-table-column label="支付方式">
|
||
<template #default="{row}">
|
||
{{ row.pay_channel===1?'微信':row.pay_channel===2?'支付宝':'/' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="支付时间">
|
||
<template #default="{row}">
|
||
{{ row.add_time| dateformat("YYYY-MM-DD HH:mm:ss") }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="text-align: right;margin-top: 15px">
|
||
<el-button size="small" @click="recordList=false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import { open_service_record } from '@/api/System'
|
||
export default {
|
||
data() {
|
||
return {
|
||
recordList: false,
|
||
recordDate: [],
|
||
Visible: false,
|
||
czform: { content: '', name: '', time: '', price: '' },
|
||
checked: false,
|
||
type: 2,
|
||
cardList: [
|
||
{ title: '9', text: '赠送三个月', money: '9', style: "{display:(show==0 ? 'block': 'none') }" },
|
||
{ title: '49', text: '赠送一个月', money: '49', style: "{display:(show==1 ? 'block': 'none') }" },
|
||
{ title: '99', text: '无时长赠送', money: '99', style: "{display:(show==2 ? 'block': 'none') }" },
|
||
{ title: '299', text: '无时长赠送', money: '299', style: "{display:(show==2 ? 'block': 'none') }" },
|
||
{ title: '499', text: '无时长赠送', money: '499', style: "{display:(show==2 ? 'block': 'none') }" },
|
||
{ title: '999', text: '无时长赠送', money: '999', style: "{display:(show==2 ? 'block': 'none') }" }
|
||
],
|
||
monthList: [
|
||
{ title: '1个月', text: '', money: '478', month: 1, oldmoney: '598', discount: '8折', icon: 'icona-huiyuanVIPVIPka', style: "{display:(show==0 ? 'block': 'none') }" },
|
||
// { title: '12个月', text: '', money: '5598', month: 12, oldmoney: '7176', discount: '7.8折', icon: 'iconhuiyuan', style: "{display:(show==1 ? 'block': 'none') }" }
|
||
],
|
||
radioList: [
|
||
{ title: '微信', icon: 'iconfont iconweixin1-copy', value: 1, style: 'color:#7ed321;font-size:20px' },
|
||
{ title: '支付宝', icon: 'iconfont iconzhifubao2', value: 2, style: 'color:#0d6bdb;font-size:20px' }
|
||
// {title:'paypal',icon:'iconfont iconpaypal1',value:3,style:"color:#0d6bdb;font-size:20px"},
|
||
],
|
||
monthinfo: [
|
||
{ title: '3万台/月，每台可低至2分钱', subtitle: '' },
|
||
{ title: '数量越多，优惠越大', subtitle: '' },
|
||
{ title: '保修信息查询，真伪查询', subtitle: '' },
|
||
{ title: '购买日期查询', subtitle: '' },
|
||
{ title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
|
||
{ title: '支持多品牌查询', subtitle: '华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
|
||
],
|
||
integralinfo: [
|
||
{ title: '安卓查询: ￥0.05/台', subtitle: '' },
|
||
{ title: '苹果查询: ￥0.27/台', subtitle: '' },
|
||
{ title: '保修信息查询,真伪查询', subtitle: '' },
|
||
{ title: 'ID锁查询,购买日期查询', subtitle: '' },
|
||
{ title: '支持安卓机器包月查询', subtitle: '' },
|
||
{ title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
|
||
{ title: '支持多品牌查询', subtitle: '苹果、华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
|
||
],
|
||
radiovalue: 1,
|
||
mon: 12,
|
||
show: 0,
|
||
monthshow: 0,
|
||
month: 1
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'expire_time'
|
||
]),
|
||
money() {
|
||
let num = 0
|
||
num = this.mon * 88
|
||
return num
|
||
}
|
||
},
|
||
props: {
|
||
aginfo: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
integralVisible: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return false
|
||
}
|
||
},
|
||
combo: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.typechange(2)
|
||
},
|
||
methods: {
|
||
async server() {
|
||
console.log('开通')
|
||
this.recordList = true
|
||
const res = await open_service_record()
|
||
console.log(res)
|
||
this.recordDate = res.datas.datas
|
||
},
|
||
addMonth(dateTar, offset) {
|
||
var date = new Date(dateTar)
|
||
if (date instanceof Date && !isNaN(offset)) {
|
||
const givenMonth = date.getMonth()
|
||
const newMonth = givenMonth + offset
|
||
date.setMonth(newMonth)
|
||
return this.getCurrentDate(date)
|
||
}
|
||
},
|
||
getCurrentDate(date) {
|
||
var seperator1 = '-'
|
||
var year = date.getFullYear()
|
||
var month = date.getMonth() + 1
|
||
var strDate = date.getDate()
|
||
if (month >= 1 && month <= 9) {
|
||
month = '0' + month
|
||
}
|
||
if (strDate >= 0 && strDate <= 9) {
|
||
strDate = '0' + strDate
|
||
}
|
||
var currentdate = year + seperator1 + month + seperator1 + strDate
|
||
return currentdate
|
||
},
|
||
typechange(e) {
|
||
this.type = e
|
||
if (e == 1) {
|
||
this.show = 0
|
||
this.hidetrue(this.combo[0])
|
||
} else {
|
||
this.monthshow = 0
|
||
this.monthhidetrue(this.monthList[0])
|
||
}
|
||
},
|
||
monthhidetrue(e) {
|
||
this.monthList.map((r, i) => {
|
||
if (e.title == r.title) {
|
||
this.monthshow = i
|
||
this.czform['content'] = this.monthList[i].title
|
||
this.czform['price'] = this.monthList[i].money
|
||
this.czform['month'] = this.monthList[i].month
|
||
this.czform['lasttime'] = this.addMonth(this.aginfo.last_time ? this.aginfo.last_time * 1000 : new Date(), this.monthList[i].month)
|
||
this.month = this.monthList[i].month
|
||
}
|
||
})
|
||
},
|
||
hidetrue(e) {
|
||
this.combo.map((r, i) => {
|
||
if (e.points == r.points) {
|
||
this.show = i
|
||
// this.$set( this.czform, 'content', e.title)
|
||
this.czform['price'] = e.points
|
||
this.czform['name'] = e.give
|
||
}
|
||
})
|
||
},
|
||
IntegralmodalOk() {
|
||
let obj = {}
|
||
if (this.type == 1) { // 积分充值
|
||
obj = { pay_type: 4, points: this.combo[this.show].points, key_id: this.combo[this.show].combo_id, pay_status: this.radiovalue }
|
||
} else { // 包月
|
||
obj = { pay_type: 5, months: this.month, actual_price: this.monthList[this.monthshow].money, pay_status: this.radiovalue }
|
||
}
|
||
this.$emit('IntegralmodalOk', obj)
|
||
console.log(obj)
|
||
this.$emit('update:integralVisible', false)
|
||
},
|
||
IntegralmodalClose() {
|
||
this.checked = false
|
||
this.$emit('update:integralVisible', false)
|
||
},
|
||
// 时间戳转化
|
||
getTime(time) {
|
||
var date = new Date(time)
|
||
var y = date.getFullYear()
|
||
var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
|
||
var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
|
||
return y + '-' + m + '-' + d
|
||
},
|
||
// 计算两个时间之间的时间差 多少天时分秒
|
||
intervalTime(startTime, endTime) {
|
||
var timestamp = new Date().getTime() // 计算当前时间戳(毫秒级)
|
||
endTime = endTime * 1000
|
||
var date1 = '' // 开始时间
|
||
if (timestamp > startTime) {
|
||
date1 = startTime
|
||
} else {
|
||
date1 = timestamp // 开始时间
|
||
}
|
||
var date2 = endTime // 结束时间
|
||
// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
|
||
var date3 = (date2 - date1) * 1000 // 时间差的毫秒数
|
||
// 计算出相差天数
|
||
var days = Math.floor(date3 / (24 * 3600 * 1000 * 1000))
|
||
// 计算出小时数
|
||
var leave1 = date3 % (24 * 3600 * 1000 * 1000) // 计算天数后剩余的毫秒数
|
||
var hours = Math.floor(leave1 / (3600 * 1000 * 1000))
|
||
// 计算相差分钟数
|
||
var leave2 = leave1 % (3600 * 1000 * 1000) // 计算小时数后剩余的毫秒数
|
||
var minutes = Math.floor(leave2 / (60 * 1000 * 1000))
|
||
// 计算相差秒数
|
||
var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
|
||
var seconds = Math.round(leave3 / 1000)
|
||
// return days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
|
||
return days + '天 '
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.jieshao{
|
||
margin-left:10px;
|
||
font-size:14px;
|
||
}
|
||
.bujieshao{
|
||
font-size:14px;
|
||
margin-top:10px;
|
||
color:rgb(93, 111, 143)
|
||
|
||
}
|
||
.model_class >>> .el-dialog__body{
|
||
padding: 0;
|
||
}
|
||
.model_class >>> .el-dialog__headerbtn{
|
||
z-index: 999;
|
||
}
|
||
.mode-tab{
|
||
cursor: pointer;
|
||
width: 332px;
|
||
height: 61px;
|
||
position: absolute;
|
||
left: 26px;
|
||
bottom: -3px;
|
||
z-index: 10;
|
||
}
|
||
.active{
|
||
z-index: 20;
|
||
color: rgb(255, 255, 255) ;
|
||
}
|
||
.tab-title.active {
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
.solo{
|
||
left: 336px;
|
||
}
|
||
.tab-icon{
|
||
position: relative;
|
||
/* svg{
|
||
position: unset;
|
||
} */
|
||
}
|
||
.tab-icon >>> svg{
|
||
position: unset;
|
||
}
|
||
.recommend{
|
||
position: absolute !important;
|
||
right: 0% !important;
|
||
top: -3px !important;
|
||
width: 86px;
|
||
}
|
||
.tab-title{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 30;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
line-height: 20px;
|
||
color: rgb(93, 111, 143);
|
||
}
|
||
.headerclass{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
}
|
||
.headermain{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 20px;
|
||
margin-left: 256px;
|
||
}
|
||
.model_top{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height:220px
|
||
}
|
||
.model_class{
|
||
width: 100%;
|
||
}
|
||
.hqpGER{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 588px;
|
||
display: flex;
|
||
margin-top: 12px;
|
||
padding: 0px 25px 28px 24px;
|
||
}
|
||
.left-container{
|
||
|
||
}
|
||
.left-main{
|
||
position: relative;
|
||
width: 245px;
|
||
height: 560px;
|
||
padding: 32px 12px 24px;
|
||
border: 1px solid rgb(218, 235, 254);
|
||
border-radius: 8px;
|
||
background: rgb(255, 255, 255);
|
||
/* color: rgb(93, 111, 143); */
|
||
color: #000;
|
||
}
|
||
.right-container{
|
||
/* width: 916px; */
|
||
margin-left: 15px;
|
||
display: flex;
|
||
}
|
||
.right-main{
|
||
background: rgb(255, 255, 255);
|
||
width: 637px;
|
||
overflow: hidden auto;
|
||
border-radius: 0px 0px 0px 8px;
|
||
padding: 30px 23px 30px 27px;
|
||
}
|
||
.right-r{
|
||
width: 279px;
|
||
height: 100%;
|
||
background: rgb(255, 255, 255);
|
||
border-radius: 0px 8px 8px 0px;
|
||
padding: 30px 19px 22px 18px;
|
||
border-left: 1px solid rgb(229, 229, 229);
|
||
}
|
||
.right-bottom{
|
||
height: 180px;
|
||
position: absolute;
|
||
bottom: 38px;
|
||
border-top: 1px solid rgba(200, 205, 208, 0.3);
|
||
}
|
||
.info-title{
|
||
font-size: 14px;
|
||
color: rgb(93, 111, 143);
|
||
line-height: 14px;
|
||
font-weight: 400;
|
||
}
|
||
.info-value{
|
||
font-size: 14px;
|
||
color: rgb(53, 68, 93);
|
||
text-align: right;
|
||
line-height: 14px;
|
||
font-weight: 400;
|
||
}
|
||
.model_class >>> .el-dialog__header{
|
||
padding: 0;
|
||
}
|
||
.model_class >>> .el-dialog-wrap{
|
||
z-index: 9999 !important;
|
||
}
|
||
.model_class >>> .el-dialog-footer{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-top:0px;
|
||
}
|
||
.model_class >>>.el-dialog__body{
|
||
/* background: url('https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo_chaxun/jf_blg.png'); */
|
||
background-size: 108% 35% ;
|
||
background-repeat: no-repeat;
|
||
background: rgb(241, 248, 255);
|
||
width: 100%;
|
||
|
||
}
|
||
/* .model_class >>> .circle {
|
||
border-radius: 50% ;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(rgba(255,255,255,0.5) ,rgba(255,255,255,0.2), rgba(255,255,255,0));
|
||
width: 150px;
|
||
height: 150px;
|
||
} */
|
||
.circle2{
|
||
border: 1px solid #EBEEF5;
|
||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||
width: 150px;
|
||
height: 38px;
|
||
background:#fff ;
|
||
border-radius: 25px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
}
|
||
.cardclass{
|
||
position: relative;
|
||
/* border: 2px solid #e5e5e5; */
|
||
color: #000;
|
||
font-size: 16px;
|
||
height: 100px;
|
||
width: 160px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.cardclass >>> .ant-divider-horizontal{
|
||
margin: 15px 0;
|
||
}
|
||
.monthclass{
|
||
cursor: pointer;
|
||
position: relative;
|
||
width: fit-content;
|
||
background-color: rgb(255, 255, 255);
|
||
border: 1px solid rgb(219, 219, 219);
|
||
border-radius: 8px;
|
||
}
|
||
.monthmain{
|
||
width: 150px;
|
||
height: 178px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0px 19px;
|
||
border: 1px solid transparent;
|
||
}
|
||
.el-card{
|
||
overflow: unset;
|
||
}
|
||
.tj{
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
background: #4a90e2;
|
||
padding: 0px 0px;
|
||
width: 33px;
|
||
color: #fff;
|
||
line-height: 18px;
|
||
font-size: 12px;
|
||
}
|
||
.guoguo{
|
||
position: absolute;
|
||
bottom: 0px;
|
||
right: 0px;
|
||
height: 18px;
|
||
width: 22px;
|
||
background: url(https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/static/assets/xiaogou.png) 0px bottom;
|
||
background-size: 100%;
|
||
display: none;
|
||
}
|
||
.circle {
|
||
display: inline-block;
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.circle:after {
|
||
content: '';
|
||
margin: 3px;
|
||
display: table;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #2ecc71;
|
||
border-radius: 50%;
|
||
}
|
||
.title{
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
line-height: 16px;
|
||
color: rgb(53, 68, 93);
|
||
}
|
||
.xianshi{
|
||
position: absolute;
|
||
left: -10px;
|
||
top: -18px;
|
||
}
|
||
.text{
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 0px;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
</style>
|