Vue实现日期选择器

游坦之 2022-09-23 07:57:40 阅读数:127

vue实现选择器选择日期

前言

本以为这是一个很简单的功能,几分钟就搞定。没想到,还是很麻烦的!记录一下开发过程。

这里就涉及到了设计模式的一些知识,如果使用静态的代码,几乎1000行,这样大学生10W的代码岂不是很容易完成?但如果采用动态的方式,估计至少要减少一半无用的代码,还没改掉。继续前进!

使用了Element-ui的Select 选择器,不过似乎有些鸡肋,感觉用下拉框就可以解决了,而且饿了么ui的选择器感觉也不是很好看。

在这里插入图片描述

1区分月份的天数

每个月的每一天都是不一样,大月31天,小月30天,二月最为特殊,平年28天,闰年29天。

科普时间:为什么隔三年二月就会多一天?

这个知识是我从汉书中得到答案的,一笑。汉朝的历法划分一年为365.25天,那么四年就会多出一天,这一天也就是闰年二月多出来的一天。

1.1 思路

这里用的很暴力的方式,每一个月份都用一个静态的数组赋值.

1.2 好处

  • 新手都可以上手
  • 操作简单,直接复制、粘贴,稍微改动即可,

1.3 缺点

  • 可维护性差,改变一点东西,需要把全部月份的情况进行改动
  • 代码冗长,可读性不好

1.4 效果

9月份为30天

image-20220922112721420

10月份为31天

image-20220922112800008

2 区分闰年和平年

2.1 思路

C++敲烂了的代码终于派上了用场

if(year%400==0||(year%4==0&&year%100!=0))
{
cout<<"这是闰年";
}else{
cout<<"这是平年";
}

3 年份月份修改导致的问题

如下图:1月份有31天,但是2月最多只有29天,这个问题怎么解决?

image-20220922132059737

image-20220922132130536

3.1 思路

设置一个修改月份的函数,一个修改年份的函数。

当修改月份的时候,查看当前的day是否大于了该月份所有的最大的天数(这里也涉及了平闰年的问题),如果大于则将该天数设置为修改月份所有的最大天数。如果不大于则不须修改。修改年份的时候也会出现这种情况,当然只涉及2月。

也就有以下三种情况:

  • 当前天数大于月份的最大天数,天数截取(如1月有31天,修改成4月,应变为30天),天数重置(如1月31日,月份变为2月,则天应该随之变为30)
  • 当前天数小于月份的最大天数,不动。
  • 月份为2,闰年平年转换,参考第一种情况解决。

3.2 效果图

在这里插入图片描述
在这里插入图片描述

4 禁用未到达的时间

4.1 思路

这个问题的解决是比较麻烦的,但也无非有一下几种情况

  • 本年不显示未到的月数

  • 本年不显示未到的天数(针对本月)

  • 年份的改变导致月数、天数的变化

  • 月份的转变导致天数的变化

4.2 效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码


<template >
<div class="firstmain">
<div id="app" class="big_main">
<div class="div_left">
<div class="left_header">
<div class="div_img">
<a href="">
<img src="@/assets/周杰伦.jpg" alt="" class="div_img_img1">
</a>
</div>
<div class="div_left_title">
<h2>风流宰相谢安</h2>
</div>
</div>
<div class="div_column">
<div class="column_hostory">
<div class="column_core">
<router-link to="index" class="core_a">
<span>历史播放</span>
</router-link>
</div>
</div>
<div class="column_hostory">
<div class="column_core">
<router-link to="MyCollect" class="core_a">
<span>我的收藏</span>
</router-link>
</div>
</div>
<div class="column_hostory">
<div class="column_core">
<a href="" class="core_a">
<span>我的评论</span>
</a>
</div>
</div>
<div class="column_hostory">
<div class="column_core">
<router-link to="Personal" class="core_a">
<span style="color:#61f6ff;font-weight: 700;">个人信息</span>
</router-link>>
</div>
</div>
<div class="column_hostory">
<div class="column_core">
<router-link to="AccountSettting" class="core_a">
<span>账号设置</span>
</router-link>>
</div>
</div>
</div>
</div>
<div class="div_main">
<!-- 头像栏 -->
<div class="main_header">
<div class="header_img">
<el-upload class="avatar-uploader" action="#" :show-file-list="false">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div class="header_username">
<span>谢安不出,如苍生何!</span>
</div>
</div>
<!-- 用户名栏 -->
<div class="main_username">
<div class="title_tag">
用户名:
</div>
<div class="title_info">
风流宰相谢安
</div>
</div>
<!-- 性别栏 -->
<div class="main_sex">
<div class="title_tag">
<span>性别</span>
</div>
<div class="title_info">
<input type="radio" value="" name="sex"><input type="radio" value="" name="sex"></div>
</div>
<!-- 出生年月栏 -->
<div class="main_Birth">
<div class="title_tag">
<span>生日</span>
</div>
<div class="title_info">
<div class="Birth_year">
<el-select v-model="year" placeholder="2000" @change="changeYear()" class="year_select">
<el-option v-for="(item,index) in years" :key="index" :value="item.value">
</el-option>
</el-select>
</div>
<div class="Birth_month"><el-select v-model="month" placeholder="01" @change="changeMonth()" class="month_select">
<el-option v-for="(item,index) in months" :key="index" :value="item.value">
</el-option>
</el-select>
</div>
<div class="Birth_day"><el-select v-model="day" placeholder="01" class="day_select">
<el-option v-for="(item,index) in days" :key="index" :value="item.value">
</el-option>
</el-select></div>
</div>
</div>
<!-- 地址 -->
<div class="main_address">
<div class="title_tag">
地区
</div>
<div class="title_info">
<el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:310px;">
</el-cascader>
</div>
</div>
<!-- 个人简介 -->
<div class="main_introduction">
<div class="title_tag">个人简介</div>
<div class="title_info">
江湖不是打打杀杀,那江湖是人情世故!
</div>
</div>
</div>
</div>
</div>
</template>
<script> import {
 regionData } from 'element-china-area-data' export default {
 name: 'Personal', data() {
 return {
 options: regionData, selectedOptions: [], SheetsInfo: [], sliceSheet: [], current_page: 1, page_size: 15, Info: '', errorImg01: 'this.src="' + require('@/assets/迪迦.gif') + '"', imageUrl: '', year: '2000', day: '01', month: '01', years: [{
 value: '2022' }, {
 value: '2021' }, {
 value: '2020' }, {
 value: '2019' }, {
 value: '2018' }, {
 value: '2017' }, {
 value: '2016' }, {
 value: '2015' }, {
 value: '2014' }, {
 value: '2013' }, {
 value: '2012' }, {
 value: '2011' }, {
 value: '2010' }, {
 value: '2009' }, {
 value: '2008' }, {
 value: '2007' }, {
 value: '2006' }, {
 value: '2005' }, {
 value: '2004' }, {
 value: '2003' }, {
 value: '2002' }, {
 value: '2001' }, {
 value: '2000' }, {
 value: '1999' }, {
 value: '1998' }, {
 value: '1997' }, {
 value: '1996' }, {
 value: '1995' }, {
 value: '1994' }, {
 value: '1993' }, {
 value: '1992' }, {
 value: '1991' }, {
 value: '1990' }, {
 value: '1989' }, {
 value: '1988' }, {
 value: '1987' }, {
 value: '1986' }, {
 value: '1985' }, {
 value: '1984' }, {
 value: '1983' }, {
 value: '1982' }, {
 value: '1981' }, {
 value: '1980' }, {
 value: '1979' }, {
 value: '1978' }, {
 value: '1977' }, {
 value: '1976' }, {
 value: '1975' }, {
 value: '1974' }, {
 value: '1973' }, {
 value: '1972' }, {
 value: '1971' }, {
 value: '1970' }, {
 value: '1969' }, {
 value: '1968' }, {
 value: '1967' }, {
 value: '1966' }, {
 value: '1965' }, {
 value: '1964' }, {
 value: '1963' }, {
 value: '1962' }, {
 value: '1961' }, {
 value: '1960' }, {
 value: '1959' }, {
 value: '1958' }, {
 value: '1957' }, {
 value: '1956' }, {
 value: '1955' }, {
 value: '1954' }, {
 value: '1953' }, {
 value: '1952' }, {
 value: '1951' }, {
 value: '1950' }, {
 value: '1949' }, {
 value: '1948' }, {
 value: '1947' }, {
 value: '1946' }, {
 value: '1945' }, {
 value: '1944' }, {
 value: '1943' }, {
 value: '1942' }, {
 value: '1941' }, {
 value: '1940' }, {
 value: '1939' }, {
 value: '1938' }, {
 value: '1937' }, {
 value: '1936' }, {
 value: '1935' }, {
 value: '1934' }, {
 value: '1933' }, {
 value: '1932' }, {
 value: '1931' }, {
 value: '1930' }, {
 value: '1929' }, {
 value: '1928' }, {
 value: '1927' }, {
 value: '1926' }, {
 value: '1925' }, {
 value: '1924' }, {
 value: '1923' }, {
 value: '1922' }, {
 value: '1921' }, {
 value: '1920' }, {
 value: '1919' }, {
 value: '1918' }, {
 value: '1917' }, {
 value: '1916' }, {
 value: '1915' }, {
 value: '1914' }, {
 value: '1913' }, {
 value: '1912' }, {
 value: '1911' }, {
 value: '1910' }, ], value: '', months: [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, ], copy_months: [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, ], days: [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, {
 value: '30' }, {
 value: '31' }, ] } }, methods: {
 handleAvatarSuccess(res, file) {
 this.imageUrl = URL.createObjectURL(file.raw); console.log("获取的数据是:" + this.imageUrl); }, beforeAvatarUpload(file) {
 console.log("获取的数据为:" + file.raw); const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) {
 this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) {
 this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleChange(value) {
 console.log(value) }, handleCurrentChange(val) {
 console.log(`当前处于${
val}`) var temp = (val - 1) * this.page_size; if (temp + this.page_size < this.SheetsInfo.length) this.sliceSheet = this.SheetsInfo.slice(temp, temp + this.page_size) else {
 this.sliceSheet = this.SheetsInfo.slice(temp, this.SheetsInfo.length) } }, getSearchInfo() {
 this.Info = "吕"; this.getAllOpreasOfSheet(this.Info); }, async getAllOpreasOfSheet(params) {
 console.log("这个参数是:" + params); let result = await this.$API.reqGetAllOpreaOfInfoTwo(params); if (result == "") {
 console.log("这个结果是空的"); } else {
 this.SheetsInfo = result; this.index = this.SheetsInfo.length; if (this.SheetsInfo.length > 0) {
 this.sliceSheet = this.SheetsInfo.slice(0, this.page_size); } } }, changeYear() {
 let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {
 if (this.month == 2 && this.day > 29) {
 this.day = 29; this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, ] } } else {
 if (this.month == 2 && this.day > 28) {
 this.day = 28; this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, ] } } let date = new Date(); let now_year = date.getFullYear(); // 月份是从0获取的所以要+1 let now_month = date.getMonth() + 1; let now_day = date.getDate(); if (y == now_year) {
 if (this.month > now_month) {
 if (now_month < 10) {
 this.month = "0" + now_month; } else {
 this.month = now_month; } this.day = '01'; } this.months = this.copy_months.slice(0, now_month); } else {
 this.months = this.copy_months; } var m = this.month; if (now_year == this.year && now_month == this.month) {
 if (this.day > now_day) {
 this.day = now_day; } this.days = this.days.slice(0, now_day); } else {
 if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
 this.days = [{
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, {
 value: '30' }, {
 value: '31' }, ] } else if (m == 2) {
 let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {
 if (this.day > 29) {
 this.day = 29; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, ] } else {
 if (this.day > 28) {
 this.day = 28; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, ] } } else {
 if (this.day > 30) {
 this.day = 30; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, {
 value: '30' }, ] } } }, changeMonth() {
 let m = this.month - 0; let date = new Date(); let now_year = date.getFullYear(); // 月份是从0获取的所以要+1 let now_month = date.getMonth() + 1; let now_day = date.getDate(); if (now_year == this.year && now_month == this.month) {
 if (this.day > now_day) {
 this.day = now_day; } this.days = this.days.slice(0, now_day); } else {
 if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
 this.days = [{
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, {
 value: '30' }, {
 value: '31' }, ] } else if (m == 2) {
 let y = this.year - 0; if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {
 if (this.day > 29) {
 this.day = 29; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, ] } else {
 if (this.day > 28) {
 this.day = 28; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, ] } } else {
 if (this.day > 30) {
 this.day = 30; } this.days = [ {
 value: '01' }, {
 value: '02' }, {
 value: '03' }, {
 value: '04' }, {
 value: '05' }, {
 value: '06' }, {
 value: '07' }, {
 value: '08' }, {
 value: '09' }, {
 value: '10' }, {
 value: '11' }, {
 value: '12' }, {
 value: '13' }, {
 value: '14' }, {
 value: '15' }, {
 value: '16' }, {
 value: '17' }, {
 value: '18' }, {
 value: '19' }, {
 value: '20' }, {
 value: '21' }, {
 value: '22' }, {
 value: '23' }, {
 value: '24' }, {
 value: '25' }, {
 value: '26' }, {
 value: '27' }, {
 value: '28' }, {
 value: '29' }, {
 value: '30' }, ] } } } } , mounted() {
 this.getSearchInfo(); } } </script>
<style scoped> .firstmain {
 width: 100%; height: 1000px; position: relative; } .big_main {
 width: 65%; height: 1000px; margin: 0px auto; margin-top: 2px; } .main_title {
 margin-left: 10px; } .div_left {
 width: 15%; height: 800px; border-radius: 7px; background-color: #34777d; background-image: linear-gradient(180deg, #34777d 0%, #0f1f47 100%); position: absolute; top: 60px; float: left; } .left_header {
 height: 200px; background-color: #346064; background-image: linear-gradient(180deg, #346064 0%, #4c0c22 100%); border-radius: 7px 7px 0px 0px; } .div_column {
 margin-top: 30px; } .main_sex {
 height: 6%; margin-top: 30px; } .main_Birth {
 height: 6%; margin-top: 30px; } .Birth_year {
 width: 85px; float: left; } .year_select {
 width: 80px; } .Birth_month {
 width: 105px; float: left; } .month_select {
 width: 80px; } .Birth_day {
 width: 120px; float: left; } .day_select {
 width: 80px; } .div_img {
 width: 80px; height: 80px; margin: 0px auto; padding-top: 40px; } .div_img_img1 {
 width: 80px; height: 80px; border-radius: 50%; } .div_left_title {
 text-align: center; color: white; margin-top: 10px; } .div_left_title h2 {
 font-size: 15px; } .column_hostory {
 text-align: center; vertical-align: middle; width: 100%; height: 60px; /* border: 1px solid red; */ } .column_core {
 width: 60%; height: 40px; margin: 0px auto; /* border: 1px solid blue; */ line-height: 40px; margin-top: 10px; } .core_a {
 text-decoration: none; color: white; font-size: 20px; } .core_a:hover {
 color: #0D9BFF; } .title_tag {
 float: left; width: 23%; margin-left: 8%; font-weight: 600; } .title_info {
 float: left; width: 50%; } .div_main {
 width: 60%; height: 800px; /* background-color: #0f1f47; */ position: absolute; top: 60px; left: 33%; border: 1px solid rebeccapurple; float: right; } .main_header {
 width: 100%; height: 25%; /* border: 1px solid #0D9BFF; */ } .main_username {
 width: 100%; margin-top: 30px; height: 6%; } .main_address {
 height: 6%; margin-top: 30px; } .username1 {
 font-size: 20px; float: left; } .username2 {
 font-size: 20px; float: left; } /* 上传头像 */ .avatar-uploader, .el-upload {
 border: 1px dashed #827777; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover {
 border-color: #409EFF; } .avatar-uploader-icon {
 font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar {
 width: 178px; height: 178px; display: block; } .header_img {
 margin-left: 10px; margin-top: 10px; width: 178px; height: 178px; } /* 上传头像 */ .header_img {
 float: left; } .header_username {
 margin-left: 10%; width: 60%; height: 50px; /* background-color: #0D9BFF; */ float: left; margin-top: 10%; font-size: 20px; font-weight: 600; } .main_introduction {
 height: 6%; margin-top: 30px; } </style>
width: 100%;
margin-top: 30px;
height: 6%;
}
.main_address {
height: 6%;
margin-top: 30px;
}
.username1 {
font-size: 20px;
float: left;
}
.username2 {
font-size: 20px;
float: left;
}
/* 上传头像 */
.avatar-uploader,
.el-upload {
border: 1px dashed #827777;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.header_img {
margin-left: 10px;
margin-top: 10px;
width: 178px;
height: 178px;
}
/* 上传头像 */
.header_img {
float: left;
}
.header_username {
margin-left: 10%;
width: 60%;
height: 50px;
/* background-color: #0D9BFF; */
float: left;
margin-top: 10%;
font-size: 20px;
font-weight: 600;
}
.main_introduction {
height: 6%;
margin-top: 30px;
}
</style>
版权声明:本文为[游坦之]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/m0_59792745/article/details/126990408