2.6
parent
8d3d65f276
commit
89471afc90
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,619 @@
|
||||
<template>
|
||||
<div style="display: inline-block">
|
||||
<!-- <span @click="showPicker">{{ getLangText(label.datetimePicker) }}</span> -->
|
||||
<div class="date-picker-bg" v-show="isShow" @click="closePicker"></div>
|
||||
<div class="date-picker" v-show="isShow" style="width: 350px">
|
||||
<div class="picker-top">
|
||||
<span class="picker-arrow" @click="preYear">‹‹</span>
|
||||
<span class="picker-arrow" @click="preMonth">‹</span>
|
||||
<span class="date-text"
|
||||
>{{ year }}-{{ month > 9 ? month : "0" + month }}</span
|
||||
>
|
||||
<span class="picker-arrow" @click="nextMonth">›</span>
|
||||
<span class="picker-arrow" @click="nextYear">››</span>
|
||||
</div>
|
||||
<div class="picker-content1 picker-content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(item, idx) in weekList" :key="'week' + idx">
|
||||
{{ getLangText(item) }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="contain"></div>
|
||||
<tbody>
|
||||
<tr v-for="idx in weekNum" :key="'weekNum' + idx">
|
||||
<td
|
||||
v-for="m in 7"
|
||||
:key="'monthDay' + idx + '_' + m"
|
||||
:class="[
|
||||
new Date(monthList[idx - 1][m - 1]).getMonth() + 1 == month
|
||||
? ''
|
||||
: 'gray',
|
||||
selectDate == monthList[idx - 1][m - 1] ? 'active' : '',
|
||||
new Date(monthList[idx - 1][m - 1]).getTime() < currentDate
|
||||
? 'bggray'
|
||||
: '',
|
||||
]"
|
||||
@click="onSelectDate(monthList[idx - 1][m - 1])"
|
||||
>
|
||||
<div>{{ new Date(monthList[idx - 1][m - 1]).getDate() }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="hour-list">
|
||||
<li
|
||||
v-for="(n, index) in hourList"
|
||||
:key="'hourList' + index"
|
||||
@click="onSelectHour(n, index)"
|
||||
:class="[index == clicktime ? 'active' : '']"
|
||||
>
|
||||
{{ n }}:<span v-if="index % 2 === 0">00</span><span v-else>30</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="minutes-list">
|
||||
<li
|
||||
v-for="n in [1, 31]"
|
||||
:key="'hourList' + n"
|
||||
@click="onSelectMinute(n - 1)"
|
||||
:class="[selectMinute == n - 1 ? 'active' : '']"
|
||||
@dblclick="onConfirmHour(n - 1)"
|
||||
>
|
||||
{{ n - 1 }}:00
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<div class="picker-footer">
|
||||
<button @click="closePicker">{{ getLangText(label.close) }}</button>
|
||||
<button @click="setNow">{{ getLangText(label.ok) }}</button>
|
||||
<!-- <button @click="confirmPicker">{{getLangText(label.ok)}}</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Date.prototype.format = function (fmt) {
|
||||
//author: meizz
|
||||
var o = {
|
||||
"M+": this.getMonth() + 1, //月份
|
||||
"d+": this.getDate(), //日
|
||||
"h+": this.getHours(), //小时
|
||||
"m+": this.getMinutes(), //分
|
||||
"s+": this.getSeconds(), //秒
|
||||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||||
S: this.getMilliseconds(), //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
|
||||
);
|
||||
for (var k in o)
|
||||
if (new RegExp("(" + k + ")").test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
|
||||
);
|
||||
return fmt;
|
||||
};
|
||||
export default {
|
||||
name: "DateTimePicker",
|
||||
props: {
|
||||
langType: {
|
||||
type: String,
|
||||
default: window.localStorage.getItem("langType"),
|
||||
},
|
||||
datetime: {
|
||||
type: String,
|
||||
default: new Date().format("yyyy-MM-dd hh:00"),
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
label: {
|
||||
ok: { zh: "确定", en: "OK" },
|
||||
close: { zh: "关闭", en: "close" },
|
||||
today: { zh: "确定", en: "now" },
|
||||
datetimePicker: { zh: "日期时间选择", en: "datetimePicker" },
|
||||
},
|
||||
clicktime: null,
|
||||
weekList: [
|
||||
{ zh: "日", en: "Sun" },
|
||||
{ zh: "一", en: "Mon" },
|
||||
{ zh: "二", en: "Tue" },
|
||||
{ zh: "三", en: "Wed" },
|
||||
{ zh: "四", en: "Thu" },
|
||||
{ zh: "五", en: "Fir" },
|
||||
{ zh: "六", en: "Sat" },
|
||||
],
|
||||
hourList: [
|
||||
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
||||
17, 18, 18,
|
||||
],
|
||||
year: new Date().getFullYear(),
|
||||
month: new Date().getMonth() + 1,
|
||||
day: new Date().getDate(),
|
||||
currentDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),
|
||||
startDay: 0,
|
||||
endDay: 0,
|
||||
weekNum: 0,
|
||||
selectDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),
|
||||
monthList: [],
|
||||
selectHour:
|
||||
new Date().getHours() > 8 && new Date().getHours() < 18
|
||||
? new Date().getHours()
|
||||
: "8",
|
||||
selectMinute:
|
||||
new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
|
||||
}),
|
||||
created() {
|
||||
console.log(this.selectDate);
|
||||
console.log(this.selectMinute);
|
||||
},
|
||||
watch: {
|
||||
year() {
|
||||
this.getMonthDay();
|
||||
},
|
||||
month() {
|
||||
this.getMonthDay();
|
||||
},
|
||||
isShow() {
|
||||
if (this.isShow) {
|
||||
// console.log(this.selectHour);
|
||||
let ind =
|
||||
(this.selectHour - 8) * 2 + (this.selectMinute === "0" ? 0 : 1);
|
||||
this.onSelectHour(this.selectHour, ind);
|
||||
this.$emit(
|
||||
"update:datetime",
|
||||
new Date(
|
||||
this.selectDate +
|
||||
this.selectHour * 3600000 +
|
||||
this.selectMinute * 60000
|
||||
).format("yyyy-MM-dd hh:mm")
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getLangText(item) {
|
||||
if (item) {
|
||||
if (this.langType == "en") {
|
||||
if (item.en && item.en.length > 1) {
|
||||
return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);
|
||||
} else if (item.en && item.en.length == 1) {
|
||||
return item.en.toUpperCase();
|
||||
} else {
|
||||
return "--";
|
||||
}
|
||||
} else {
|
||||
return item.zh ? item.zh : "--";
|
||||
}
|
||||
} else {
|
||||
return "--";
|
||||
}
|
||||
},
|
||||
preYear() {
|
||||
this.year = this.year - 1;
|
||||
},
|
||||
nextYear() {
|
||||
this.year = this.year + 1;
|
||||
},
|
||||
nextMonth() {
|
||||
if (this.month == 12) {
|
||||
this.year = this.year + 1;
|
||||
this.month = 1;
|
||||
} else {
|
||||
this.month++;
|
||||
}
|
||||
},
|
||||
preMonth() {
|
||||
if (this.month == 1) {
|
||||
this.year = this.year - 1;
|
||||
this.month = 12;
|
||||
} else {
|
||||
this.month--;
|
||||
}
|
||||
},
|
||||
showPicker() {
|
||||
this.$emit("update:is-show", true);
|
||||
|
||||
var time = new Date(this.datetime).getTime();
|
||||
this.year = new Date(time).getFullYear();
|
||||
this.month = new Date(time).getMonth() + 1;
|
||||
this.day = new Date(time).getDate();
|
||||
this.selectDate = new Date(
|
||||
new Date(time).format("yyyy-MM-dd 00:00")
|
||||
).getTime();
|
||||
this.selectHour = new Date(time).getHours();
|
||||
},
|
||||
onConfirmDate(time) {
|
||||
this.onSelectDate(time);
|
||||
this.confirmPicker();
|
||||
},
|
||||
onConfirmHour(n) {
|
||||
this.onSelectHour(n);
|
||||
this.confirmPicker();
|
||||
},
|
||||
closePicker() {
|
||||
this.$emit("update:is-show", false);
|
||||
},
|
||||
setNow() {
|
||||
// this.year = new Date().getFullYear();
|
||||
// this.month = new Date().getMonth() + 1;
|
||||
// this.day = new Date().getDate();
|
||||
// this.selectDate = new Date(
|
||||
// new Date().format("yyyy-MM-dd 00:00")
|
||||
// ).getTime();
|
||||
// this.selectHour = new Date().getHours();
|
||||
// this.selectMinute =
|
||||
// new Date().getMinutes() > 0 && new Date().getMinutes() <= 30
|
||||
// ? "0"
|
||||
// : "30";
|
||||
this.$emit("update:is-show", false);
|
||||
},
|
||||
confirmPicker() {
|
||||
// console.log(this.selectMinute);
|
||||
// this.$emit(
|
||||
// "update:datetime",
|
||||
// new Date(
|
||||
// this.selectDate +
|
||||
// this.selectHour * 3600000 +
|
||||
// this.selectMinute * 60000
|
||||
// ).format("yyyy-MM-dd hh:mm")
|
||||
// );
|
||||
// this.$emit(
|
||||
// "pickerresult",
|
||||
// new Date(this.selectDate + this.selectHour * 3600000).format(
|
||||
// "yyyy-MM-dd hh:00"
|
||||
// )
|
||||
// );
|
||||
this.closePicker();
|
||||
},
|
||||
getMonthDay() {
|
||||
var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
|
||||
var w = monthFirst.getDay();
|
||||
|
||||
this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000;
|
||||
if (this.month == 12) {
|
||||
this.endDay = new Date(this.year + 1 + "-01-01 00:00").getTime() - 1000;
|
||||
} else {
|
||||
this.endDay =
|
||||
new Date(this.year + "-" + (this.month + 1) + "-01 00:00").getTime() -
|
||||
1000;
|
||||
}
|
||||
|
||||
var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000);
|
||||
this.weekNum = Math.ceil(monthDay / 7);
|
||||
this.monthList = [];
|
||||
for (var i = 0; i < this.weekNum; i++) {
|
||||
var item = [];
|
||||
for (var j = 0; j < 7; j++) {
|
||||
item.push(
|
||||
this.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
|
||||
);
|
||||
}
|
||||
this.monthList.push(item);
|
||||
}
|
||||
},
|
||||
onSelectHour(n, index) {
|
||||
// console.log(n);
|
||||
this.selectHour = n;
|
||||
|
||||
this.clicktime = index;
|
||||
if (index % 2 === 0) {
|
||||
this.selectMinute = "0";
|
||||
} else {
|
||||
this.selectMinute = "30";
|
||||
}
|
||||
this.$emit(
|
||||
"update:datetime",
|
||||
new Date(
|
||||
this.selectDate +
|
||||
this.selectHour * 3600000 +
|
||||
this.selectMinute * 60000
|
||||
).format("yyyy-MM-dd hh:mm")
|
||||
);
|
||||
},
|
||||
onSelectMinute(n) {
|
||||
this.selectMinute = n;
|
||||
console.log(this.selectMinute);
|
||||
|
||||
this.$emit(
|
||||
"update:datetime",
|
||||
new Date(
|
||||
this.selectDate +
|
||||
this.selectHour * 3600000 +
|
||||
this.selectMinute * 60000
|
||||
).format("yyyy-MM-dd hh:mm")
|
||||
);
|
||||
},
|
||||
onSelectDate(time) {
|
||||
console.log(time);
|
||||
if (time < this.currentDate) {
|
||||
return;
|
||||
} else {
|
||||
this.selectDate = time;
|
||||
}
|
||||
this.year = new Date(time).getFullYear();
|
||||
this.month = new Date(time).getMonth() + 1;
|
||||
this.day = new Date(time).getDate();
|
||||
// console.log(this.year, "--------", this.month, "--------", this.day);
|
||||
this.$emit(
|
||||
"update:datetime",
|
||||
new Date(time + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthDay();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.date-picker-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
z-index: 6;
|
||||
// border: solid 1px gainsboro;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 8px #ddd;
|
||||
.picker-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
.picker-arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #8a8a8a;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
.iconfont:active,
|
||||
.iconfont:hover {
|
||||
color: #388dea;
|
||||
}
|
||||
}
|
||||
|
||||
.date-text {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-content {
|
||||
display: block;
|
||||
border-top: solid 1px #eee;
|
||||
border-bottom: solid 1px #eee;
|
||||
height: 200px;
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px !important;
|
||||
.contain {
|
||||
height: 2px;
|
||||
}
|
||||
thead {
|
||||
padding-bottom: 5px;
|
||||
tr {
|
||||
margin-bottom: 5px;
|
||||
background-color: #fff4e3;
|
||||
color: rgba(77, 87, 94);
|
||||
th {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
margin-top: 10px;
|
||||
tr {
|
||||
td {
|
||||
// height: 50px;
|
||||
box-sizing: border-box;
|
||||
color: rgba(77, 87, 94);
|
||||
// font-weight: 600;
|
||||
padding: 0 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
// border-radius: 4px;
|
||||
div {
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
line-height: 23px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin: 0 2px;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
td.gray {
|
||||
font-weight: 400;
|
||||
color: rgba(138, 138, 138, 0.7);
|
||||
}
|
||||
td.bggray {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
background-color: #f5f5f5;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
td:not(.bggray):hover {
|
||||
div {
|
||||
border: 1px solid #ff6a00;
|
||||
color: #ff6a00;
|
||||
}
|
||||
}
|
||||
td.active {
|
||||
div {
|
||||
background: #ff6a00;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-content1:extend(.picker-content all) {
|
||||
// &: extend ;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
table {
|
||||
width: calc(100% - 40px);
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.hour-list,
|
||||
.minutes-list {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 0 2px 0 5px;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
width: 80px;
|
||||
font-size: 12px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 0px !important; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 5px;
|
||||
// -webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.06);
|
||||
background: #ddd !important;
|
||||
}
|
||||
// &::-webkit-scrollbar-track {
|
||||
// /*滚动条里面轨道*/
|
||||
// -webkit-box-shadow: inset 0 0 5px rgba(112, 112, 112, 0.06);
|
||||
// border-radius: 0;
|
||||
// background: rgba(0, 0, 0, 0.1);
|
||||
// }
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
// color: #4d575e;
|
||||
color: rgba(77, 87, 94, 0.8);
|
||||
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
line-height: 13px;
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
// li:not(:last-child) {
|
||||
// border-bottom: solid 1px gainsboro;
|
||||
// }
|
||||
li.active {
|
||||
color: white;
|
||||
background: #ff6a00;
|
||||
}
|
||||
}
|
||||
.minutes-list {
|
||||
width: 60px;
|
||||
}
|
||||
.hour-list::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hour-list::-webkit-scrollbar-thumb {
|
||||
background: lightgray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
//设置滚动条 end
|
||||
}
|
||||
|
||||
.picker-footer {
|
||||
display: block;
|
||||
line-height: 42px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
button {
|
||||
outline: none;
|
||||
border: solid 1px gainsboro;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
padding-left: 1px;
|
||||
color: #8a8a8a;
|
||||
height: 24px;
|
||||
width: 50px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
margin-right: 12px;
|
||||
background-color: #f3f3f3;
|
||||
&:first-child {
|
||||
background-color: #fff;
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: #eee;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
background-color: #ff6a00;
|
||||
border-color: #ff6a00;
|
||||
color: #fff;
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: #ff6a00;
|
||||
background-color: #ff832a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,511 @@
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
th,
|
||||
td,
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: PingFangSC, PingFangSC-Regular;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: PingFangSC, PingFangSC-Regular;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: couriernew, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
sup {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
sub {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
legend {
|
||||
color: #000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
:root {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 18px;
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
/* Project id 3135652 */
|
||||
src: url("../assets/fontfile/iconfont.woff2") format("woff2"), url("../assets/fontfile/iconfont.woff") format("woff"), url("../assets/fontfile/iconfont.ttf") format("truetype");
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.icon-rili:before {
|
||||
content: "\e736";
|
||||
}
|
||||
.icon-dingbulogo:before {
|
||||
content: "\e71d";
|
||||
}
|
||||
.icon-weixin1:before {
|
||||
content: "\e716";
|
||||
}
|
||||
.icon-gerenzhongxin-mima:before {
|
||||
content: "\e71c";
|
||||
}
|
||||
.icon-bangdingyinhangka:before {
|
||||
content: "\e71b";
|
||||
}
|
||||
.icon-gerenzhongxin:before {
|
||||
content: "\e719";
|
||||
}
|
||||
.icon-zhanghaoshezhi:before {
|
||||
content: "\e71a";
|
||||
}
|
||||
.icon-gerenzhongxin-bangdingshouji:before {
|
||||
content: "\e70c";
|
||||
}
|
||||
.icon-shimingrenzheng:before {
|
||||
content: "\e70d";
|
||||
}
|
||||
.icon-gongdan:before {
|
||||
content: "\e710";
|
||||
}
|
||||
.icon-yue:before {
|
||||
content: "\e711";
|
||||
}
|
||||
.icon-laoxiang:before {
|
||||
content: "\e715";
|
||||
}
|
||||
.icon-jifen:before {
|
||||
content: "\e717";
|
||||
}
|
||||
.icon-kaquan:before {
|
||||
content: "\e718";
|
||||
}
|
||||
.icon-youjiantou:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
.icon-zanwukaquan:before {
|
||||
content: "\e714";
|
||||
}
|
||||
.icon-zhengyan:before {
|
||||
content: "\e712";
|
||||
}
|
||||
.icon-biyan:before {
|
||||
content: "\e713";
|
||||
}
|
||||
.icon-zhongguoyinhang:before {
|
||||
content: "\e70a";
|
||||
}
|
||||
.icon-zhongyuanyinhang:before {
|
||||
content: "\e70b";
|
||||
}
|
||||
.icon-nongyeyinhang:before {
|
||||
content: "\e70f";
|
||||
}
|
||||
.icon-guanbi:before {
|
||||
content: "\e701";
|
||||
}
|
||||
.icon-guanbishixin:before {
|
||||
content: "\e8dc";
|
||||
}
|
||||
.icon-morentouxiang:before {
|
||||
content: "\e700";
|
||||
}
|
||||
.icon-touxiang:before {
|
||||
content: "\e620";
|
||||
}
|
||||
.icon-xuanzhong:before {
|
||||
content: "\e6fe";
|
||||
}
|
||||
.icon-weixuanzhong:before {
|
||||
content: "\e6ff";
|
||||
}
|
||||
.icon-yigezhuanmenfuwudailidepingtai2:before {
|
||||
content: "\e6fa";
|
||||
}
|
||||
.icon-yigezhuanmenfuwudailidepingtai:before {
|
||||
content: "\e6f8";
|
||||
}
|
||||
.icon-xiala:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
.icon-sousuo:before {
|
||||
content: "\e608";
|
||||
}
|
||||
.icon-duanxinyanzheng:before {
|
||||
content: "\e6f3";
|
||||
}
|
||||
.icon-shouji:before {
|
||||
content: "\e6f2";
|
||||
}
|
||||
.icon-mima:before {
|
||||
content: "\e6f1";
|
||||
}
|
||||
.icon-yonghuming:before {
|
||||
content: "\e6f0";
|
||||
}
|
||||
.icon-shibai:before {
|
||||
content: "\e6ef";
|
||||
}
|
||||
.icon-chenggong:before {
|
||||
content: "\e6ee";
|
||||
}
|
||||
.icon-weixin:before {
|
||||
content: "\e6e9";
|
||||
}
|
||||
.icon-sologan:before {
|
||||
content: "\e6e1";
|
||||
}
|
||||
.icon-dingwei:before {
|
||||
content: "\e6df";
|
||||
}
|
||||
.icon-yonghu:before {
|
||||
content: "\e6e0";
|
||||
}
|
||||
.w {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ant-calendar-picker-container-content {
|
||||
margin-top: 3px;
|
||||
width: 341px !important;
|
||||
}
|
||||
.ant-calendar-picker {
|
||||
border-color: #d9d9d9 !important;
|
||||
}
|
||||
.ant-calendar-picker:hover .ant-calendar-picker-input {
|
||||
border-color: #d9d9d9 !important;
|
||||
}
|
||||
.ant-calendar-picker:focus .ant-calendar-picker-input {
|
||||
border-color: #d9d9d9 !important;
|
||||
}
|
||||
.ant-breadcrumb .ant-breadcrumb-link a:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.pagecontainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item-container .ant-pagination-item-link-icon {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.pagecontainer .ant-pagination-options-quick-jumper {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.pagecontainer .ant-pagination-disabled a:hover {
|
||||
color: #c5c5c5 !important;
|
||||
}
|
||||
.pagecontainer .ant-pagination-next:focus .ant-pagination-item-link,
|
||||
.pagecontainer .ant-pagination-prev:focus .ant-pagination-item-link {
|
||||
color: #000000a6;
|
||||
}
|
||||
.pagecontainer .ant-pagination-next:hover .ant-pagination-item-link,
|
||||
.pagecontainer .ant-pagination-prev:hover .ant-pagination-item-link {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.pagecontainer input[type="text"] {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
.pagecontainer input[type="text"]:focus {
|
||||
border: 1px solid #ff6a00;
|
||||
}
|
||||
.pagecontainer input[type="text"]:hover {
|
||||
border: 1px solid #ff6a00;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item {
|
||||
border: none;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item a:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item-active {
|
||||
background: #ff6a00;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item-active a {
|
||||
color: white;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item-active a:hover {
|
||||
color: white;
|
||||
}
|
||||
.pagecontainer .ant-pagination-item-link {
|
||||
border: none;
|
||||
}
|
||||
.ant-cascader-menus.monthlypay,
|
||||
.ant-cascader-menus.agestr {
|
||||
width: 100vw;
|
||||
margin: 0 auto;
|
||||
top: 70px !important;
|
||||
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
||||
transition: none !important;
|
||||
}
|
||||
.ant-cascader-menus.monthlypay .ant-cascader-menu,
|
||||
.ant-cascader-menus.agestr .ant-cascader-menu {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-cascader-menus.monthlypay .ant-cascader-menu .ant-cascader-menu-item,
|
||||
.ant-cascader-menus.agestr .ant-cascader-menu .ant-cascader-menu-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: calc(-550vw) !important;
|
||||
}
|
||||
.ant-cascader-menus.monthlypay .ant-cascader-menu .ant-cascader-menu-item:hover,
|
||||
.ant-cascader-menus.agestr .ant-cascader-menu .ant-cascader-menu-item:hover {
|
||||
background-color: rgba(255, 106, 0, 0.1);
|
||||
color: #ff6a00;
|
||||
}
|
||||
.ant-cascader-menus.slide-up-leave-active {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.ant-cascader-menus.slide-up-enter-active {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.ant-cascader-menus.slide-up-leave {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
.ant-cascader-menus.slide-up-enter {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.ant-cascader-menus.flitercity {
|
||||
left: calc(-558vw) !important;
|
||||
top: 70px !important;
|
||||
border-radius: 0 0 4px 4px !important;
|
||||
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.ant-cascader-menus.flitercity .ant-cascader-menu {
|
||||
height: 500px;
|
||||
}
|
||||
.ant-cascader-menus.flitercity .ant-cascader-menu .ant-cascader-menu-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.ant-cascader-menus.flitercity .ant-cascader-menu .ant-cascader-menu-item:hover {
|
||||
background-color: rgba(255, 106, 0, 0.1);
|
||||
color: #ff6a00;
|
||||
}
|
||||
.logindropdown {
|
||||
left: calc(463vw) !important;
|
||||
}
|
||||
.logindropdown .loginbox {
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
.logindropdown .loginbox > div {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.logindropdown .loginbox > a > div {
|
||||
display: flex;
|
||||
padding: 16px 0;
|
||||
font-size: 14px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.logindropdown .loginbox > a > div:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.logindropdown .loginbox > a > div span {
|
||||
line-height: 18px;
|
||||
}
|
||||
.logindropdown .loginbox > a > div span i {
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.logindropdown .loginbox button {
|
||||
width: 130px;
|
||||
height: 32px;
|
||||
margin-top: 24px;
|
||||
border: 1px solid rgba(77, 87, 94, 0.1);
|
||||
border-radius: 17px;
|
||||
color: #ff6a00;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.beforeblock {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
background: #ff6a00;
|
||||
}
|
||||
h1.bottombox,
|
||||
p.bottombox {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
h1.bottombox::after,
|
||||
p.bottombox::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: -20px;
|
||||
background-color: #eeefef;
|
||||
}
|
||||
.ant-cascader-menu,
|
||||
.ant-modal-body {
|
||||
max-height: 300px !important;
|
||||
}
|
||||
.ant-cascader-menu::-webkit-scrollbar,
|
||||
.ant-modal-body::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 7px;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 4px;
|
||||
}
|
||||
.ant-cascader-menu::-webkit-scrollbar-thumb,
|
||||
.ant-modal-body::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.06);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ant-cascader-menu::-webkit-scrollbar-track,
|
||||
.ant-modal-body::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(112, 112, 112, 0.06);
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ant-breadcrumb {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.ant-breadcrumb .ant-breadcrumb-link {
|
||||
cursor: default;
|
||||
}
|
||||
@media screen and (max-width: 1910px) {
|
||||
.loginlogo {
|
||||
margin: 40px auto !important;
|
||||
}
|
||||
}
|
||||
.ant-spin-dot-item {
|
||||
background-color: #fda21d;
|
||||
}
|
||||
.ant-spin-text {
|
||||
color: #fda21d;
|
||||
}
|
||||
@ -0,0 +1,234 @@
|
||||
export let nationlist = [
|
||||
{
|
||||
id: "01",
|
||||
name: "汉族",
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
name: "蒙古族",
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
name: "回族",
|
||||
},
|
||||
{
|
||||
id: "04",
|
||||
name: "藏族",
|
||||
},
|
||||
{
|
||||
id: "05",
|
||||
name: "维吾尔族",
|
||||
},
|
||||
{
|
||||
id: "06",
|
||||
name: "苗族",
|
||||
},
|
||||
{
|
||||
id: "07",
|
||||
name: "彝族",
|
||||
},
|
||||
{
|
||||
id: "08",
|
||||
name: "壮族",
|
||||
},
|
||||
{
|
||||
id: "09",
|
||||
name: "布依族",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "朝鲜族",
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
name: "满族",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
name: "侗族",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
name: "瑶族",
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
name: "白族",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
name: "土家族",
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
name: "哈尼族",
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
name: "哈萨克族",
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
name: "傣族",
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
name: "黎族",
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
name: "傈僳族",
|
||||
},
|
||||
{
|
||||
id: "21",
|
||||
name: "佤族",
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
name: "畲族",
|
||||
},
|
||||
{
|
||||
id: "23",
|
||||
name: "高山族",
|
||||
},
|
||||
{
|
||||
id: "24",
|
||||
name: "拉祜族",
|
||||
},
|
||||
{
|
||||
id: "25",
|
||||
name: "水族",
|
||||
},
|
||||
{
|
||||
id: "26",
|
||||
name: "东乡族",
|
||||
},
|
||||
{
|
||||
id: "27",
|
||||
name: "纳西族",
|
||||
},
|
||||
{
|
||||
id: "28",
|
||||
name: "景颇族",
|
||||
},
|
||||
{
|
||||
id: "29",
|
||||
name: "柯尔克孜族",
|
||||
},
|
||||
{
|
||||
id: "30",
|
||||
name: "土族",
|
||||
},
|
||||
{
|
||||
id: "31",
|
||||
name: "达斡尔族",
|
||||
},
|
||||
{
|
||||
id: "32",
|
||||
name: "仫佬族",
|
||||
},
|
||||
{
|
||||
id: "33",
|
||||
name: "羌族",
|
||||
},
|
||||
{
|
||||
id: "34",
|
||||
name: "布朗族",
|
||||
},
|
||||
{
|
||||
id: "35",
|
||||
name: "撒拉族",
|
||||
},
|
||||
{
|
||||
id: "36",
|
||||
name: "毛难族",
|
||||
},
|
||||
{
|
||||
id: "37",
|
||||
name: "仡佬族",
|
||||
},
|
||||
{
|
||||
id: "38",
|
||||
name: "锡伯族",
|
||||
},
|
||||
{
|
||||
id: "39",
|
||||
name: "阿昌族",
|
||||
},
|
||||
{
|
||||
id: "40",
|
||||
name: "普米族",
|
||||
},
|
||||
{
|
||||
id: "41",
|
||||
name: "塔吉克族",
|
||||
},
|
||||
{
|
||||
id: "42",
|
||||
name: "怒族",
|
||||
},
|
||||
{
|
||||
id: "43",
|
||||
name: "乌孜别克族",
|
||||
},
|
||||
{
|
||||
id: "44",
|
||||
name: "俄罗斯族",
|
||||
},
|
||||
{
|
||||
id: "45",
|
||||
name: "鄂温克族",
|
||||
},
|
||||
{
|
||||
id: "46",
|
||||
name: "崩龙族",
|
||||
},
|
||||
{
|
||||
id: "47",
|
||||
name: "保安族",
|
||||
},
|
||||
{
|
||||
id: "48",
|
||||
name: "裕固族",
|
||||
},
|
||||
{
|
||||
id: "49",
|
||||
name: "京族",
|
||||
},
|
||||
{
|
||||
id: "50",
|
||||
name: "塔塔尔族",
|
||||
},
|
||||
{
|
||||
id: "51",
|
||||
name: "独龙族",
|
||||
},
|
||||
{
|
||||
id: "52",
|
||||
name: "鄂伦春族",
|
||||
},
|
||||
{
|
||||
id: "53",
|
||||
name: "赫哲族",
|
||||
},
|
||||
{
|
||||
id: "54",
|
||||
name: "门巴族",
|
||||
},
|
||||
{
|
||||
id: "55",
|
||||
name: "珞巴族",
|
||||
},
|
||||
{
|
||||
id: "56",
|
||||
name: "基诺族",
|
||||
},
|
||||
{
|
||||
id: "57",
|
||||
name: "其他",
|
||||
},
|
||||
{
|
||||
id: "58",
|
||||
name: "外国血统中国人士",
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue