|
@@ -0,0 +1,623 @@
|
|
|
|
|
+<!-- <template>
|
|
|
|
|
+ <div style="display: inline-block;">
|
|
|
|
|
+ <mark
|
|
|
|
|
+ style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0);z-index: 999;"
|
|
|
|
|
+ v-show="showSeason"
|
|
|
|
|
+ @click.stop="showSeason=false"
|
|
|
|
|
+ ></mark>
|
|
|
|
|
+ <el-input :placeholder="placeholder" v-model="showValue" v-bind="$attrs" @focus="clickInput" ref="inputText">
|
|
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-date"></i>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ <el-card
|
|
|
|
|
+ class="box-card"
|
|
|
|
|
+ style="width: 322px;padding: 0 30px 20px;margin-top: 10px;position: fixed;z-index: 9999"
|
|
|
|
|
+ :style="{top:divTop + 'px'}"
|
|
|
|
|
+ v-show="showSeason"
|
|
|
|
|
+ ref="card"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="clearfix" style="text-align: center;padding: 0;" slot="header">
|
|
|
|
|
+ <button
|
|
|
|
|
+ class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ aria-label="前一年"
|
|
|
|
|
+ @click="prev"
|
|
|
|
|
+ ></button>
|
|
|
|
|
+ <span class="el-date-picker__header-label">{{ year }}年</span>
|
|
|
|
|
+ <button
|
|
|
|
|
+ class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ aria-label="后一年"
|
|
|
|
|
+ @click="next"
|
|
|
|
|
+ ></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text item" style="text-align: center;">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ style="width: 40%;color: #606266;float: left;"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+ @click="selectSeason(0)"
|
|
|
|
|
+ >第一季度
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ style="width: 40%;color: #606266;float: right;"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+ @click="selectSeason(1)"
|
|
|
|
|
+ >第二季度
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text item" style="text-align: center;">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ style="width: 40%;color: #606266;float: left;"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+ @click="selectSeason(2)"
|
|
|
|
|
+ >第三季度
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ style="width: 40%;color: #606266;float: right;"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+ @click="selectSeason(3)"
|
|
|
|
|
+ >第四季度
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-card>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: "quarter-picker",
|
|
|
|
|
+ model: {
|
|
|
|
|
+ prop: 'inputValue',
|
|
|
|
|
+ event: 'inputValue'
|
|
|
|
|
+ },
|
|
|
|
|
+ props: {
|
|
|
|
|
+ valueArr: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: () => {
|
|
|
|
|
+ return ['01-01,03-31', '04-01,06-30', '07-01,09-30', '10-01,12-31'];
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ placeholder: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '请选择季度'
|
|
|
|
|
+ },
|
|
|
|
|
+ inputValue: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: function() {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ changeValue: {
|
|
|
|
|
+ type: Function,
|
|
|
|
|
+ default: () => {}
|
|
|
|
|
+ },
|
|
|
|
|
+ otherData: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: () => {
|
|
|
|
|
+ return {};
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ if (this.inputValue != null && this.inputValue.length > 0) {
|
|
|
|
|
+ this.showText(this.inputValue);
|
|
|
|
|
+ }
|
|
|
|
|
+ window.addEventListener('scroll', this.handleScroll, true);
|
|
|
|
|
+ },
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ inputValue(newValue) {
|
|
|
|
|
+ if (newValue.length > 0) {
|
|
|
|
|
+ this.showText(newValue);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.showValue = "";
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ showSeason: false,
|
|
|
|
|
+ showValue: '',
|
|
|
|
|
+ year: new Date().getFullYear(),
|
|
|
|
|
+ season: '',
|
|
|
|
|
+ divTop: 0
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ handleScroll() {
|
|
|
|
|
+ let inputText = this.$refs.inputText.$el;
|
|
|
|
|
+ if (inputText.getBoundingClientRect().top + 220 > document.body.offsetHeight) {
|
|
|
|
|
+ this.divTop = inputText.getBoundingClientRect().top - 215;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.divTop = inputText.getBoundingClientRect().top + 30;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ clickInput() {
|
|
|
|
|
+ this.handleScroll();
|
|
|
|
|
+ this.showSeason = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ prev() {
|
|
|
|
|
+ this.year = this.year * 1 - 1;
|
|
|
|
|
+ },
|
|
|
|
|
+ next() {
|
|
|
|
|
+ this.year = this.year * 1 + 1;
|
|
|
|
|
+ },
|
|
|
|
|
+ selectSeason(i) {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ that.season = i + 1; // 得到当前季度
|
|
|
|
|
+ let arr = that.valueArr[i].split(',');
|
|
|
|
|
+ let value = [];
|
|
|
|
|
+ let start = that.year + '-' + arr[0]; // 得到当前季度的开始日期
|
|
|
|
|
+ let end = that.year + '-' + arr[1]; // 得到当前季度的结束日期
|
|
|
|
|
+ value.push(start); // 将季度开始日期和季度结束日期存入数组中
|
|
|
|
|
+ value.push(end);
|
|
|
|
|
+ if (this.inputValue != null && this.inputValue[0] != value[0]) {
|
|
|
|
|
+ this.changeValue(value, this.otherData);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$emit('inputValue', value);
|
|
|
|
|
+ that.showSeason = false;
|
|
|
|
|
+ this.showText(value);
|
|
|
|
|
+ },
|
|
|
|
|
+ showText(value) { // value为数组,数组索引为0的值为季度开始时间
|
|
|
|
|
+ let arr = value[0].split('-'); // 将季度开始时间用-进行分割
|
|
|
|
|
+ this.year = arr[0];
|
|
|
|
|
+ let month = arr[1];
|
|
|
|
|
+ this.season = Math.ceil(month / 3); // 向上取整
|
|
|
|
|
+ this.showValue = `${this.year}年${this.season}季度`; // 设置显示格式
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <style scoped>
|
|
|
|
|
+ ._mark {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .yearBtn {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 0
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box-card {
|
|
|
|
|
+ width: 322px;
|
|
|
|
|
+ padding: 0 3px 20px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ z-index: 9999
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item >>> .el-button {
|
|
|
|
|
+ width: 40%;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item ._left {
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item ._right {
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style> -->
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <template>
|
|
|
|
|
+
|
|
|
|
|
+ <el-form>
|
|
|
|
|
+
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ <mark
|
|
|
|
|
+
|
|
|
|
|
+ class="_mark"
|
|
|
|
|
+
|
|
|
|
|
+ v-show="showSeason"
|
|
|
|
|
+
|
|
|
|
|
+ @click.stop="showSeason = false"
|
|
|
|
|
+
|
|
|
|
|
+ ></mark>
|
|
|
|
|
+
|
|
|
|
|
+ <el-input
|
|
|
|
|
+
|
|
|
|
|
+ placeholder="请选择季度"
|
|
|
|
|
+
|
|
|
|
|
+ v-model="showValue"
|
|
|
|
|
+
|
|
|
|
|
+ size="small"
|
|
|
|
|
+
|
|
|
|
|
+ style="width:12.7rem;"
|
|
|
|
|
+
|
|
|
|
|
+ @focus="showSeason = true"
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-date"></i>
|
|
|
|
|
+
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+
|
|
|
|
|
+ <el-card class="box-card" v-show="showSeason">
|
|
|
|
|
+
|
|
|
|
|
+ <div slot="header" class="clearfix yearBtn">
|
|
|
|
|
+
|
|
|
|
|
+ <button
|
|
|
|
|
+
|
|
|
|
|
+ type="button"
|
|
|
|
|
+
|
|
|
|
|
+ aria-label="前一年"
|
|
|
|
|
+
|
|
|
|
|
+ class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
|
|
|
|
|
+
|
|
|
|
|
+ @click="prev"
|
|
|
|
|
+
|
|
|
|
|
+ ></button>
|
|
|
|
|
+
|
|
|
|
|
+ <span role="button" class="el-date-picker__header-label"
|
|
|
|
|
+
|
|
|
|
|
+ >{{ year }}年</span
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ <button
|
|
|
|
|
+
|
|
|
|
|
+ type="button"
|
|
|
|
|
+
|
|
|
|
|
+ aria-label="后一年"
|
|
|
|
|
+
|
|
|
|
|
+ @click="next"
|
|
|
|
|
+
|
|
|
|
|
+ class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
|
|
|
|
|
+
|
|
|
|
|
+ ></button>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="text item">
|
|
|
|
|
+
|
|
|
|
|
+ <el-button
|
|
|
|
|
+
|
|
|
|
|
+ type="text"
|
|
|
|
|
+
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+
|
|
|
|
|
+ class="_left"
|
|
|
|
|
+
|
|
|
|
|
+ @click="selectSeason(0)"
|
|
|
|
|
+
|
|
|
|
|
+ >第一季度</el-button
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ <el-button
|
|
|
|
|
+
|
|
|
|
|
+ type="text"
|
|
|
|
|
+
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+
|
|
|
|
|
+ class="_right"
|
|
|
|
|
+
|
|
|
|
|
+ @click="selectSeason(1)"
|
|
|
|
|
+
|
|
|
|
|
+ >第二季度</el-button
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="text item">
|
|
|
|
|
+
|
|
|
|
|
+ <el-button
|
|
|
|
|
+
|
|
|
|
|
+ type="text"
|
|
|
|
|
+
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+
|
|
|
|
|
+ class="_left"
|
|
|
|
|
+
|
|
|
|
|
+ @click="selectSeason(2)"
|
|
|
|
|
+
|
|
|
|
|
+ >第三季度</el-button
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ <el-button
|
|
|
|
|
+
|
|
|
|
|
+ type="text"
|
|
|
|
|
+
|
|
|
|
|
+ size="medium"
|
|
|
|
|
+
|
|
|
|
|
+ class="_right"
|
|
|
|
|
+
|
|
|
|
|
+ @click="selectSeason(3)"
|
|
|
|
|
+
|
|
|
|
|
+ >第四季度</el-button
|
|
|
|
|
+
|
|
|
|
|
+ >
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </el-card>
|
|
|
|
|
+
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+
|
|
|
|
|
+ export default {
|
|
|
|
|
+
|
|
|
|
|
+ props: {
|
|
|
|
|
+
|
|
|
|
|
+ valueArr: {
|
|
|
|
|
+
|
|
|
|
|
+ default: () => {
|
|
|
|
|
+
|
|
|
|
|
+ return ["01-03", "04-06", "07-09", "10-12"];
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ getValue: {
|
|
|
|
|
+
|
|
|
|
|
+ default: () => {},
|
|
|
|
|
+
|
|
|
|
|
+ type: Function,
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ defaultValue: {
|
|
|
|
|
+
|
|
|
|
|
+ default: "",
|
|
|
|
|
+
|
|
|
|
|
+ type: String,
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ data() {
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+
|
|
|
|
|
+ showSeason: false,
|
|
|
|
|
+
|
|
|
|
|
+ season: "",
|
|
|
|
|
+
|
|
|
|
|
+ year: new Date().getFullYear(),
|
|
|
|
|
+
|
|
|
|
|
+ showValue: "",
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ created() {
|
|
|
|
|
+
|
|
|
|
|
+ if (this.defaultValue) {
|
|
|
|
|
+
|
|
|
|
|
+ let value = this.defaultValue;
|
|
|
|
|
+
|
|
|
|
|
+ let arr = value.split("-");
|
|
|
|
|
+
|
|
|
|
|
+ this.year = arr[0].slice(0, 4);
|
|
|
|
|
+
|
|
|
|
|
+ let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
|
|
|
|
|
+
|
|
|
|
|
+ let arrAll = this.valueArr;
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ watch: {
|
|
|
|
|
+
|
|
|
|
|
+ defaultValue: function(value) {
|
|
|
|
|
+
|
|
|
|
|
+ let arr = value.split("-");
|
|
|
|
|
+
|
|
|
|
|
+ this.year = arr[0].slice(0, 4);
|
|
|
|
|
+
|
|
|
|
|
+ let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
|
|
|
|
|
+
|
|
|
|
|
+ let arrAll = this.valueArr;
|
|
|
|
|
+
|
|
|
|
|
+ // if(arrAll.indexOf(str)==0){
|
|
|
|
|
+
|
|
|
|
|
+ // this.showValue = `${this.year}年第一季度`;
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ methods: {
|
|
|
|
|
+
|
|
|
|
|
+ one() {
|
|
|
|
|
+
|
|
|
|
|
+ this.showSeason = false;
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ prev() {
|
|
|
|
|
+
|
|
|
|
|
+ this.year = this.year * 1 - 1;
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ next() {
|
|
|
|
|
+
|
|
|
|
|
+ this.year = this.year * 1 + 1;
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ reast(){
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = ''
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ selectSeason(i) {
|
|
|
|
|
+
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+
|
|
|
|
|
+ that.season = i + 1;
|
|
|
|
|
+
|
|
|
|
|
+ let arr = that.valueArr[i].split("-");
|
|
|
|
|
+
|
|
|
|
|
+ that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
|
|
|
|
|
+
|
|
|
|
|
+ that.showSeason = false;
|
|
|
|
|
+
|
|
|
|
|
+ if(this.season == 1){
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年第一季度`;
|
|
|
|
|
+
|
|
|
|
|
+ }else if(this.season == 2){
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年第二季度`;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ else if(this.season == 3){
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年第三季度`;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ else if(this.season == 4){
|
|
|
|
|
+
|
|
|
|
|
+ this.showValue = `${this.year}年第四季度`;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // this.showValue = `${this.year}年${this.season}季度`;
|
|
|
|
|
+
|
|
|
|
|
+ that.sendMsg()
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ getLastDay(year, month) {
|
|
|
|
|
+
|
|
|
|
|
+ var new_year = year; //取当前的年份
|
|
|
|
|
+
|
|
|
|
|
+ var new_month = month++; //取下一个月的第一天,方便计算(最后一天不固定)
|
|
|
|
|
+
|
|
|
|
|
+ if (month > 12) {
|
|
|
|
|
+
|
|
|
|
|
+ new_month -= 12; //月份减
|
|
|
|
|
+
|
|
|
|
|
+ new_year++; //年份增
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
|
|
|
|
|
+
|
|
|
|
|
+ return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ sendMsg() {
|
|
|
|
|
+
|
|
|
|
|
+ this.$emit("func", this.showValue);
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <style scoped>
|
|
|
|
|
+
|
|
|
|
|
+ ._mark {
|
|
|
|
|
+
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+
|
|
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
|
|
+
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .yearBtn {
|
|
|
|
|
+
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box-card {
|
|
|
|
|
+
|
|
|
|
|
+ width: 322px;
|
|
|
|
|
+
|
|
|
|
|
+ padding: 0 3px 20px;
|
|
|
|
|
+
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+
|
|
|
|
|
+ z-index: 9999;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item {
|
|
|
|
|
+
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item >>> .el-button {
|
|
|
|
|
+
|
|
|
|
|
+ width: 40%;
|
|
|
|
|
+
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item ._left {
|
|
|
|
|
+
|
|
|
|
|
+ float: left;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text.item ._right {
|
|
|
|
|
+
|
|
|
|
|
+ float: right;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ </style>
|