mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-25 06:02:52 +08:00
重构页面
This commit is contained in:
na.guo
@@ -9,6 +9,7 @@ const ServiceDepartOffice = () => import('@/views/ebiz/institutionalPerform/Serv
|
||||
const RegionalOffice = () => import('@/views/ebiz/institutionalPerform/RegionalOffice')
|
||||
|
||||
const InstitutionalManpower = () => import('@/views/ebiz/institutionalPerform/InstitutionalManpower')
|
||||
const institutionalPerform = () => import('@/views/ebiz/institutionalPerform/institutionalPerform')
|
||||
export default [
|
||||
// 分公司
|
||||
{
|
||||
@@ -91,20 +92,21 @@ export default [
|
||||
}
|
||||
},
|
||||
{
|
||||
//活动人力
|
||||
path: '/institutionalPerform/institutionalManpower/:manageLv/:manageCode',
|
||||
path: '/institutionalPerform/InstitutionalManpower/:manageLv/:manageCode',
|
||||
name: 'InstitutionalManpower',
|
||||
component: InstitutionalManpower,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
// children: [
|
||||
// {
|
||||
// path: '/:manageCode',
|
||||
// component: InstitutionalManpower,
|
||||
// name: 'InstitutionalManpower1'
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
path: '/institutionalPerform/InstitutionalPerform/:manageLv/:manageCode',
|
||||
name: 'institutionalPerform',
|
||||
component: institutionalPerform,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -124,7 +124,10 @@ export default {
|
||||
reload () {
|
||||
this.manageLv=this.$route.params.manageLv;
|
||||
this.manageCode=this.$route.params.manageCode
|
||||
|
||||
this.queryColumns.forEach(() => {
|
||||
|
||||
this.items.push('0')
|
||||
})
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
formatterYear(type, val) {
|
||||
@@ -138,7 +141,7 @@ export default {
|
||||
if (name == 0) {
|
||||
//this.curMainType = '02'
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/UnderOffice'
|
||||
path: '/institutionalPerform/InstitutionalPerform/02/8645'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red1">
|
||||
<van-tab title="实时"></van-tab>
|
||||
<van-tab @click="showDatePicker = true" title="日"></van-tab>
|
||||
<van-tab title="月"></van-tab>
|
||||
<van-tab title="年"></van-tab>
|
||||
</van-tabs>
|
||||
<div class="p10 pl40 pr40">
|
||||
<!-- 年月日选择 -->
|
||||
|
||||
<van-row>
|
||||
<van-col span="3">
|
||||
<img :src="require('@/assets/images/ebiz/calendar.png')" />
|
||||
</van-col>
|
||||
<van-col class="fs14 mp2" span="9" @click="showMonthPicker = true"><span v-if="showText">截至</span>{{ timeVal }}</van-col>
|
||||
<van-col span="3">
|
||||
<img style="margin-top: 2px;" :src="require('@/assets/images/ebiz/point.png')" />
|
||||
</van-col>
|
||||
<van-col span="9">
|
||||
<span class="fs14" @click="showPicker = true">{{ sortTypeText }}</span>
|
||||
</van-col>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker show-toolbar :columns="queryColumns" @confirm="onConfirm" @cancel="showPicker = false" />
|
||||
</van-popup>
|
||||
</van-row>
|
||||
</div>
|
||||
<!-- 时间选择器 -->
|
||||
<!-- 日 -->
|
||||
<van-popup v-model="showDatePicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@confirm="onConfirmDate"
|
||||
@cancel="showDatePicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
<!-- 月 -->
|
||||
<van-popup v-model="showMonthPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
v-model="currentMonthDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@confirm="onConfirmDate"
|
||||
@cancel="showMonthPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
<!-- 年 -->
|
||||
<van-popup v-model="showYearPicker" position="bottom">
|
||||
<van-picker v-model="currentYearDate" show-toolbar :columns="YearColumns" @confirm="onConfirmDate" @cancel="showYearPicker = false" />
|
||||
</van-popup>
|
||||
<!-- /时间选择器 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let newArr = []
|
||||
import Vue from 'vue'
|
||||
import util from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/js/util'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeVal: '',
|
||||
shitimeVal: '',
|
||||
sortTypeText: '预收保费',
|
||||
showText: true,
|
||||
showPicker: false,
|
||||
YearColumns: ['2020', '2019'],
|
||||
minDate: new Date(2019, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
// 年月日选择器
|
||||
showDatePicker: false,
|
||||
showMonthPicker: false,
|
||||
showYearPicker: false
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
name: 'Selectors',
|
||||
props: {
|
||||
queryColumns: {
|
||||
type: Array,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCurrentDate()
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickRabs(name, title) {
|
||||
this.curTab = name
|
||||
if (name == 1) {
|
||||
this.showDatePicker = true
|
||||
} else if (name == 2) {
|
||||
this.showMonthPicker = true
|
||||
} else if (name == 3) {
|
||||
this.showYearPicker = true
|
||||
} else {
|
||||
// "截至"文字显示出来
|
||||
this.showText = true
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal = this.shitimeVal
|
||||
// 调接口
|
||||
|
||||
this.$emit('getQueryType', this.dateType)
|
||||
}
|
||||
},
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
return `${val}年`
|
||||
} else if (type === 'month') {
|
||||
return `${val}月`
|
||||
}
|
||||
return val
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
dateFormat(time) {
|
||||
// 时间格式化 2019-09-08
|
||||
let year = time.getFullYear()
|
||||
let month = time.getMonth() + 1
|
||||
let day = util.getLastDay(year, time.getMonth())
|
||||
return year + '-' + this.add0(month) + '-' + this.add0(day)
|
||||
},
|
||||
onConfirm(value, index) {
|
||||
this.sortTypeText = value
|
||||
// switch (value) {
|
||||
// case this.queryColumns[0]:
|
||||
// this.sortType = '1'
|
||||
// break
|
||||
// case this.queryColumns[1]:
|
||||
// this.sortType = '2'
|
||||
// break
|
||||
// case this.queryColumns[2]:
|
||||
// this.sortType = '3'
|
||||
// break
|
||||
// case this.queryColumns[3]:
|
||||
// this.sortType = '4'
|
||||
// break
|
||||
// }
|
||||
this.$emit('getSortType', index + 1)
|
||||
this.showPicker = false
|
||||
},
|
||||
getCurrentDate() {
|
||||
var timeStr = ''
|
||||
var curDate = new Date()
|
||||
var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
|
||||
var curDay = curDate.getDate() //获取当前日(1-31)
|
||||
|
||||
var curHour = curDate.getHours() //获取当前小时数(0-23)
|
||||
var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
|
||||
var curSec = curDate.getSeconds() //获取当前秒数(0-59)
|
||||
if (curHour < 10) {
|
||||
if (curMinute < 10) {
|
||||
timeStr += ' 0' + curHour + ':0' + curMinute
|
||||
} else {
|
||||
timeStr += ' 0' + curHour + ':' + curMinute
|
||||
}
|
||||
} else {
|
||||
if (curMinute < 10) {
|
||||
timeStr += ' ' + curHour + ':0' + curMinute
|
||||
} else {
|
||||
timeStr += ' ' + curHour + ':' + curMinute
|
||||
}
|
||||
}
|
||||
// 一直在获取时间
|
||||
this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
|
||||
// 存页面上值得一个变量
|
||||
this.timeVal = this.shitimeVal
|
||||
},
|
||||
dateFormat(time) {
|
||||
// 时间格式化 2019-09-08
|
||||
let year = time.getFullYear()
|
||||
let month = time.getMonth() + 1
|
||||
let day = time.getDate()
|
||||
return year + '-' + this.add0(month) + '-' + this.add0(day)
|
||||
},
|
||||
onConfirmDate(value, index) {
|
||||
// 月
|
||||
this.getCurrentDate()
|
||||
this.$emit('getDateVal', this.dateVal)
|
||||
this.showDatePicker = this.showMonthPicker = this.showYearPicker = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,15 @@
|
||||
export default {
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
getLastDay(y, m) {
|
||||
y = y || new Date().getFullYear()
|
||||
m = m || new Date().getMonth()
|
||||
return new Date(y, m + 1, 0).getDate()
|
||||
},
|
||||
getMonthLastDay(y, m) {
|
||||
y = y || new Date().getFullYear()
|
||||
m = m || new Date().getMonth()
|
||||
return y + '-' + this.add0(m + 1) + '-' + new Date(y, m + 1, 0).getDate()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.van-row {
|
||||
line-height: 1.6rem;
|
||||
}
|
||||
.van-tabs__nav--card .van-tab {
|
||||
&:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div v-cloak class="container">
|
||||
<!-- <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
|
||||
<template #right>
|
||||
<img @click="getlComPremDetil" :src="refreshLogo" />
|
||||
</template> -->
|
||||
</van-nav-bar>
|
||||
<!-- 业绩和人力 -->
|
||||
<van-tabs @click="onClickMain" v-model="active" type="card" class="p0 title">
|
||||
<van-tab title="机构业绩排名"></van-tab>
|
||||
<van-tab title="机构人力排名"></van-tab>
|
||||
</van-tabs>
|
||||
<Selectors @getQueryType="getQueryType" @getDateVal="getDateVal" @getSortType="getSortType" :queryColumns="queryColumns"></Selectors>
|
||||
<div class="layer-box">
|
||||
<div class="layer">
|
||||
<table class="fs14" style="table-layout:fixed;padding-left: 4.1em;">
|
||||
<tr class="title">
|
||||
<th class="td-1" style="height: 1.3em;">排名</th>
|
||||
<th class="td-2">机构</th>
|
||||
<th>{{ queryColumns[0]}}</th>
|
||||
<th>{{ queryColumns[1]}}</th>
|
||||
<th>{{ queryColumns[2]}}</th>
|
||||
<th>{{ queryColumns[3]}}</th>
|
||||
|
||||
<th>{{ queryColumns[4]}}</th>
|
||||
|
||||
<th v-if="manageLv != '07'">操作</th>
|
||||
</tr>
|
||||
<tr >
|
||||
<td class="td-1 white" style="width:3.2em;height: 1.3em;">1</td>
|
||||
<td class="td-2">合计</td>
|
||||
<td >{{ items[0]| toFixed(2) }}</td>
|
||||
<td>{{ items[1]| toFixed(2) }}</td>
|
||||
<td>{{ items[2]| toFixed(2) }}</td>
|
||||
<td>{{ items[3]| toFixed(2) }}</td>
|
||||
<td>{{ items[4]| toFixed(2) }}</td>
|
||||
|
||||
</tr>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td class="td-1"><div>{{ index + 1 }}</div></td>
|
||||
<td >
|
||||
<div style="width:10em">{{ item.name }}</div>
|
||||
</td>
|
||||
<td>{{ item.ysbb| toFixed(2) }}</td>
|
||||
<td>{{ item.bzbf| toFixed(2) }}</td>
|
||||
<td>{{ item.cbbf| toFixed(2) }}</td>
|
||||
<td>{{ item.ysjs| toFixed(2) }}</td>
|
||||
<td>{{ item.cbjs| toFixed(2) }}</td>
|
||||
|
||||
<td v-if="manageLv != '07'">
|
||||
<span @click="toDetail(item.code)" class="red1">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { XTable } from 'vux'
|
||||
import Selectors from '@/views/ebiz/institutionalPerform/institutionalPerform/components/Selectors'
|
||||
import util from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/js/util'
|
||||
import { branchOfficeApi } from '@/api/ebiz/branchOffice/branchOffice'
|
||||
|
||||
import { Tabs, Tab } from 'vant'
|
||||
export default {
|
||||
name: 'InstitutionalManpower',
|
||||
components: {
|
||||
Selectors,
|
||||
[Tabs.name]: Tabs,
|
||||
[Tab.name]: Tab
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortType: '1',
|
||||
queryType:'now',
|
||||
manageCode: '8645',
|
||||
manageLv: '02',
|
||||
tableData: [],
|
||||
items: [],
|
||||
bzbfTotol: 0,
|
||||
queryColumns: ['预收保费','承保标保 ', '承保保费', '预收件数', '承保件数'],
|
||||
active: 0,
|
||||
// 当前的机构编码
|
||||
curCode: '',
|
||||
dateType: 'm',
|
||||
dateVal: '',
|
||||
curTab: '',
|
||||
shitimeVal: '',
|
||||
curMainType: '02'
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
toFixed(value) {
|
||||
return Number(value).toFixed(2)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.reload()
|
||||
},
|
||||
tableData(value) {
|
||||
|
||||
if (value) {
|
||||
let sum1 = 0
|
||||
let sum2 = 0
|
||||
let sum3 = 0
|
||||
let sum4 = 0
|
||||
let sum5 = 0
|
||||
this.tableData.forEach(item => {
|
||||
sum1 = Number(sum1) + Number(item.ysbb)
|
||||
sum2 = Number(sum2) + Number(item.bzbf)
|
||||
sum3 = Number(sum3) + Number(item.cbbf)
|
||||
sum4 = Number(sum4) + Number(item.ysjs)
|
||||
sum5 = Number(sum5) + Number(item.cbjs)
|
||||
this.items = [sum1, sum2, sum3, sum4,sum5]
|
||||
})
|
||||
this.items = this.items.map(item => {
|
||||
return item
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload () {
|
||||
this.manageLv=this.$route.params.manageLv;
|
||||
this.manageCode=this.$route.params.manageCode
|
||||
this.queryColumns.forEach(() => {
|
||||
|
||||
this.items.push('0.00')
|
||||
})
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
formatterYear(type, val) {
|
||||
if (type === 'year') {
|
||||
return val + '年'
|
||||
}
|
||||
return val
|
||||
},
|
||||
|
||||
onClickMain(name) {
|
||||
if (name == 1) {
|
||||
//this.curMainType = '02'
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/InstitutionalManpower/02/8645'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
toDetail(manageCode) {
|
||||
|
||||
|
||||
let manageLv = '0' + (Number(this.manageLv) + 1)
|
||||
// this.manageCode = manageCode
|
||||
console.log(`/institutionalPerform/institutionalManpower/${manageLv}/${manageCode}`)
|
||||
|
||||
this.$router.push(`/institutionalPerform/institutionalPerform/${manageLv}/${manageCode}`) ;
|
||||
this.manageLv=this.$route.params.manageLv;
|
||||
this.manageCode=this.$route.params.manageCode
|
||||
console.log('this.manageLv',this.manageLv)
|
||||
this.getlComPremDetil()
|
||||
|
||||
},
|
||||
|
||||
getCurrentDate() {
|
||||
var timeStr = ''
|
||||
var curDate = new Date()
|
||||
var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
|
||||
var curDay = curDate.getDate() //获取当前日(1-31)
|
||||
|
||||
var curHour = curDate.getHours() //获取当前小时数(0-23)
|
||||
var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
|
||||
var curSec = curDate.getSeconds() //获取当前秒数(0-59)
|
||||
if (curHour < 10) {
|
||||
if (curMinute < 10) {
|
||||
timeStr += ' 0' + curHour + ':0' + curMinute
|
||||
} else {
|
||||
timeStr += ' 0' + curHour + ':' + curMinute
|
||||
}
|
||||
} else {
|
||||
if (curMinute < 10) {
|
||||
timeStr += ' ' + curHour + ':0' + curMinute
|
||||
} else {
|
||||
timeStr += ' ' + curHour + ':' + curMinute
|
||||
}
|
||||
}
|
||||
// 一直在获取时间
|
||||
this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
|
||||
// 存页面上值得一个变量
|
||||
this.timeVal = this.shitimeVal
|
||||
},
|
||||
|
||||
onBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
getQueryType(value) {
|
||||
console.log(value, 'value')
|
||||
this.queryType = value
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
getSortType(value) {
|
||||
console.log(value, 'value')
|
||||
this.sortType = value.toString()
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
getDateVal(value) {
|
||||
this.dateVal = value
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
//获取列表
|
||||
getlComPremDetil() {
|
||||
let $this = this
|
||||
let data = {
|
||||
manageLv: this.manageLv,
|
||||
manageCode: this.manageCode,
|
||||
sortType: this.sortType,
|
||||
queryType: this.queryType,
|
||||
date: this.dateVal, // 2020-07-31
|
||||
type: '01'
|
||||
}
|
||||
|
||||
if(this.queryType=='now'){
|
||||
delete data['date']
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
for (var key in data) {
|
||||
if (data[key] === '') {
|
||||
delete data[key]
|
||||
}
|
||||
}
|
||||
branchOfficeApi(data)
|
||||
.then(res => {
|
||||
if (res.result == 0) {
|
||||
//console.log(res.content.list)
|
||||
this.tableData = res.content.list
|
||||
}
|
||||
})
|
||||
.catch(err => {})
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.timeVal=this.$route.query.timeVal||""
|
||||
// this.showText=this.$route.query.showText
|
||||
|
||||
// this.getCurrentDate()
|
||||
// setInterval(this.getCurrentDate, 1000 * 60)
|
||||
|
||||
this.dateVal = util.getMonthLastDay()
|
||||
this.reload()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/sass/variables.scss';
|
||||
.container {
|
||||
.van-row{
|
||||
line-height: 25px;
|
||||
}
|
||||
.van-tabs__nav--card .van-tab {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.van-tabs__nav--card .van-tab.van-tab--active {
|
||||
color: $red1;
|
||||
background-color: #fff;
|
||||
}
|
||||
.van-tabs__nav--card .van-tab {
|
||||
color: #232020;
|
||||
background-color: #e6e6e6;
|
||||
border-right: 1px solid #8e8d8d;
|
||||
&:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
.van-nav-bar .van-icon,
|
||||
.van-nav-bar__text {
|
||||
color: #232020;
|
||||
}
|
||||
.slide-box {
|
||||
display: -webkit-box;
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
table.gridtable {
|
||||
font-family: verdana, arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #333333;
|
||||
border-width: 1px;
|
||||
border-color: #666666;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table .title th {
|
||||
|
||||
padding: 5px 10px;
|
||||
|
||||
|
||||
}
|
||||
table td {
|
||||
text-align: right;
|
||||
padding:8px;
|
||||
&:nth-child(2){
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
table .title th {
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
|
||||
white-space: nowrap;
|
||||
border-width: 1px;
|
||||
border-color: #666666;
|
||||
background-color: $red1;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border: 0;
|
||||
}
|
||||
.title .van-tabs__nav--card {
|
||||
margin: 0;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.title .van-tabs__nav--card .van-tab {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 固定表头
|
||||
td,
|
||||
th {
|
||||
/* color: #333;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #333;
|
||||
line-height: 30px; */
|
||||
/* box-sizing: border-box; */
|
||||
background: #fff;
|
||||
}
|
||||
.layer-box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.layer {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.td-1 {
|
||||
position: absolute;
|
||||
padding: 2.13333vw;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 3em;
|
||||
height: 2.57em;
|
||||
div{
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
.td-2 {
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user