网站正能量晚上在线观看_dreamweaver cs6_百度seo点击_搜索引擎优化seo怎么做

<view class="content"><view class="dateWrap" @click="getDate()"><u-icon name="calendar" color="#2979ff" size="24"></u-icon><u-input class="iptCfg" placeholder="请选择考勤日期" :value="selectMonth" suffixIcon="arrow-down" readonly /></view><scroll-view scroll-x="true" :scroll-left="scrollLeft"><view class="date-content"><view v-for="(dateItem, index) in dateList" :key="index" class="date-item" :class="{ selected: index == selectIndex }" @click="handleDateSelect(index)"><view v-if="dateItem.isToday" class="todayText"><view class="circle"></view>今天</view><view v-else>{{ dateItem.week }}</view><view class="day-number">{{ dateItem.day }}</view></view></view></scroll-view>
</view>
<u-datetime-picker :show="visible" v-model="value" mode="year-month" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" @close="close" :closeOnClickOverlay="true"></u-datetime-picker><script>mounted() {this.initDate();
},
methods: {//初始化日期,实现今天的日期高亮initDate() {const now = new Date();this.currentYear = now.getFullYear();this.currentMonth = now.getMonth() + 1;this.selectMonth = this.$moment().format('YYYY-MM');this.form.signDate = this.$moment().format('YYYY-MM-DD');		this.generateDateList();//获取当前月份的所有日期},// 生成日期列表（当月所有日期）generateDateList() {const currentMonthStart = this.$moment([this.currentYear, this.currentMonth - 1]);const today = this.$moment();const lastDay = currentMonthStart.clone().endOf('month').date();const dateList = [];for (let i = 1; i <= lastDay; i++) {const d = currentMonthStart.clone().date(i);const day = d.date();const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.day()];const isToday = d.isSame(today, 'day');dateList.push({day,week,isToday,isSelected: false});}this.dateList = dateList;this.calculateScrollLeft();//定位到当前日期所在位置},// 计算滚动位置，定位到今天的日期calculateScrollLeft() {const todayIndex = this.dateList.findIndex(item => item.isToday);if (todayIndex !== -1) {this.selectIndex = todayIndex;//当前日期高亮赋值// 每个日期项宽度为 100rpxthis.scrollLeft = todayIndex * 100;this.form.signDate = this.selectMonth + '-' + this.dateList[todayIndex].day;this.getList();//获取选择日期后的列表数据} else {this.selectIndex = 0;//非当前月份时,默认高亮第一天this.form.signDate = this.selectMonth + '-' + this.dateList[0].day;//列表传参this.getList();}},// 选择日--切换高亮handleDateSelect(index) {this.selectIndex = index;this.dateList.forEach((item) => {item.isSelected = false;});this.dateList[index].isSelected = true;this.form.signDate = this.selectMonth + '-' + this.dateList[index].day;this.getList();},//选择月份confirm(e) {this.currentYear = this.$moment(e.value).format('YYYY');this.currentMonth = this.$moment(e.value).format('MM');this.selectMonth = this.$moment(e.value).format('YYYY-MM');this.form.signDate = this.selectMonth + '-' + '01';this.visible = false;this.generateDateList();//选择月份,重新处理获取所属日},formatter(type, value) {if (type === 'year') {return `${value}年`}if (type === 'month') {return `${value}月`}if (type === 'day') {return `${value}日`}return value},//日期弹框getDate() {this.defaultDate = this.form.signDate ? this.form.signDate : '';this.visible = true;},//逻辑处理getList() {}
}<style>.date-content {width: 100%;display: flex;overflow-x: auto;margin-top: 10rpx;}.date-item {display: flex;flex-direction: column;width: 200rpx;align-items: center;margin-right: 20rpx;padding: 24rpx 20rpx;background-color: #ffffff;border-radius: 10rpx;transition: background-color 0.3s;}.todayText {position: relative;.circle {position: absolute;top: -14rpx;left: 20rpx;width: 10rpx;height: 10rpx;background-color: red;border-radius: 50%;}}.date-item.today {color: #fff;background-color: #1989fa;}.date-item.selected {color: #fff;background-color: #1989fa;}.date-item.today text {color: #ffffff;}.date-item text {color: #606266;font-size: 28rpx;margin-bottom: 8rpx;}.day-number {margin-top: 10rpx;width: 60rpx;text-align: center;// color: #303133;font-size: 36rpx;font-weight: bold;}
</style>

效果展示

---------可封装组件,后期再完善--------