Browse Source

组件优化

pull/2/head
pengda 1 month ago
parent
commit
173c4dfb5b
  1. 9234
      package-lock.json
  2. 1
      src/assets/super/growth-down.svg
  3. 1
      src/assets/super/growth-flat.svg
  4. 1
      src/assets/super/growth-up.svg
  5. 23
      src/components/super/DateSelect.vue
  6. 1
      src/main.js

9234
package-lock.json

File diff suppressed because it is too large

1
src/assets/super/growth-down.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="10.5" height="14" viewBox="0 0 10.5 14"><defs><clipPath id="master_svg0_230_73233"><rect x="0" y="0" width="10.5" height="14" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_230_73233)"><g transform="matrix(1,0,0,-1,0,26.8515625)"><g><path d="M4.62109,13.67187525Q4.89453,13.42578125,5.25,13.42578125Q5.60547,13.42578125,5.87891,13.67187525L10.2539,18.04687125Q10.5,18.32031125,10.5,18.67578125Q10.5,19.03125125,10.2539,19.30469125Q9.98047,19.55078125,9.625,19.55078125Q9.26953,19.55078125,8.99609,19.30469125L6.125,16.40625125L6.125,24.80078125Q6.125,25.18358125,5.87891,25.42968125Q5.63281,25.67578125,5.25,25.67578125Q4.86719,25.67578125,4.62109,25.42968125Q4.375,25.18358125,4.375,24.80078125L4.375,16.40625125L1.50391,19.30469125Q1.23047,19.55078125,0.875,19.55078125Q0.519531,19.55078125,0.246094,19.30469125Q0,19.03125125,0,18.67578125Q0,18.32031125,0.246094,18.04687125L4.62109,13.67187525Z" fill="#EF4444" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/assets/super/growth-flat.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="11.5" height="2" viewBox="0 0 11.5 2"><g><path d="M1,0L10.5,0Q10.59849,0,10.69509,0.019214999999999982Q10.79169,0.038429999999999964,10.88268,0.076121Q10.97368,0.11381200000000002,11.0556,0.16852999999999996Q11.1375,0.22324900000000003,11.2071,0.29289299999999996Q11.2767,0.362537,11.3315,0.44443Q11.3862,0.526322,11.4239,0.617317Q11.4616,0.708311,11.4808,0.80491Q11.5,0.9015086,11.5,1Q11.5,1.0984914,11.4808,1.19509Q11.4616,1.2916889999999999,11.4239,1.382683Q11.3862,1.473678,11.3315,1.55557Q11.2767,1.637463,11.2071,1.7071070000000002Q11.1375,1.776751,11.0556,1.83147Q10.97368,1.886188,10.88268,1.923879Q10.79169,1.96157,10.69509,1.980785Q10.59849,2,10.5,2L1,2Q0.9015086,2,0.80491,1.980785Q0.708311,1.96157,0.617317,1.923879Q0.526322,1.886188,0.44443,1.83147Q0.362537,1.776751,0.29289299999999996,1.7071070000000002Q0.22324900000000003,1.637463,0.16852999999999996,1.55557Q0.11381200000000002,1.473678,0.076121,1.382683Q0.038429999999999964,1.2916889999999999,0.019214999999999982,1.19509Q0,1.0984914,0,1Q0,0.9015086,0.019214999999999982,0.80491Q0.038429999999999964,0.708311,0.076121,0.617317Q0.11381200000000002,0.526322,0.16852999999999996,0.44443Q0.22324900000000003,0.362537,0.29289299999999996,0.29289299999999996Q0.362537,0.22324900000000003,0.44443,0.16852999999999996Q0.526322,0.11381200000000002,0.617317,0.076121Q0.708311,0.038429999999999964,0.80491,0.019214999999999982Q0.9015086,0,1,0Z" fill-rule="evenodd" fill="#006AFF" fill-opacity="1"/></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/assets/super/growth-up.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="10.5" height="14" viewBox="0 0 10.5 14"><defs><clipPath id="master_svg0_223_004796"><rect x="0" y="0" width="10.5" height="14" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_223_004796)"><g transform="matrix(1,0,0,-1,0,26.8515625)"><g><path d="M5.87891,25.42968125Q5.60547,25.67578125,5.25,25.67578125Q4.89453,25.67578125,4.62109,25.42968125L0.246094,21.05469125Q0,20.78125125,0,20.42578125Q0,20.07031125,0.246094,19.79687125Q0.519531,19.55078125,0.875,19.55078125Q1.23047,19.55078125,1.50391,19.79687125L4.375,22.69531125L4.375,14.30078125Q4.375,13.91796925,4.62109,13.67187525Q4.86719,13.42578125,5.25,13.42578125Q5.63281,13.42578125,5.87891,13.67187525Q6.125,13.91796925,6.125,14.30078125L6.125,22.69531125L8.99609,19.79687125Q9.26953,19.55078125,9.625,19.55078125Q9.98047,19.55078125,10.2539,19.79687125Q10.5,20.07031125,10.5,20.42578125Q10.5,20.78125125,10.2539,21.05469125L5.87891,25.42968125Z" fill="#22C55E" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

23
src/components/super/DateSelect.vue

@ -2,15 +2,15 @@
<div class="date-picker"> <div class="date-picker">
<div class="header"> <div class="header">
<div class="current-date year-selector" v-if="view === 'month'" > <div class="current-date year-selector" v-if="view === 'month'" >
<button>&lt;</button> <button @click="prevYear">&lt;</button>
<span @click="getMonYear">{{ currentYear !== selectedYear ? selectedYear : currentYear }}</span> <span @click="getMonYear">{{ currentYear !== selectedYear ? selectedYear : currentYear }}</span>
<button>&gt;</button> <button @click="nextYear">&gt;</button>
</div> </div>
<div class="selectYear" v-if="view !== 'month'" > <div class="selectYear" v-if="view !== 'month'" >
<span class="year">{{view == 'monthTwo' ? '选择年份':'' }}</span> <span class="year">{{view == 'monthTwo' ? '选择年份':'' }}</span>
</div> </div>
<div class="controls"> <div class="controls">
<button @click="toggleView('month')" :class="{ active: view !== 'year' }">月度</button> <button v-if="!onlyYear" @click="toggleView('month')" :class="{ active: view !== 'year' }">月度</button>
<button @click="toggleView('year')" :class="{ active: view === 'year' }">年度</button> <button @click="toggleView('year')" :class="{ active: view === 'year' }">年度</button>
</div> </div>
</div> </div>
@ -58,6 +58,10 @@
view:{ view:{
type:String, type:String,
default:'month' default:'month'
},
onlyYear:{
type:Boolean,
default:false
} }
}, },
data() { data() {
@ -66,7 +70,7 @@
selectedYear: this.modelValue.getFullYear(), selectedYear: this.modelValue.getFullYear(),
currentMonth: this.modelValue.getMonth() + 1, currentMonth: this.modelValue.getMonth() + 1,
currentYear: this.modelValue.getFullYear(), currentYear: this.modelValue.getFullYear(),
decadeStart: Math.floor(this.modelValue.getFullYear() / 10) * 10, decadeStart: Math.floor(this.modelValue.getFullYear() / 10) * 10 - 6,
months: [ months: [
{ value: 1, label: '1月' }, { value: 1, label: '1月' },
{ value: 2, label: '2月' }, { value: 2, label: '2月' },
@ -103,7 +107,7 @@
this.currentMonth = selectedDate.getMonth() + 1; this.currentMonth = selectedDate.getMonth() + 1;
this.currentYear = selectedDate.getFullYear(); this.currentYear = selectedDate.getFullYear();
this.selectedYear = this.currentYear; this.selectedYear = this.currentYear;
this.decadeStart = Math.floor(this.currentYear / 10) * 10; this.decadeStart = Math.floor(this.modelValue.getFullYear() / 10) * 10 - 6;
}else{ }else{
selectedDate = new Date() selectedDate = new Date()
} }
@ -113,16 +117,15 @@
// this.$emit('update-count', 'month') // this.$emit('update-count', 'month')
}, },
destroyed(){ destroyed(){
this.$emit('update-count', 'month') // this.$emit('update-count', 'month')
console.log('destroyed===='); console.log('destroyed====');
}, },
methods: { methods: {
getMonYear(){ getMonYear(){
this.$emit('update-count', 'monthTwo') this.$emit('update-count', 'monthTwo')
}, },
toggleView(viewType) { toggleView(viewType) {
this.$emit('update-count', viewType) this.$emit('update-count', viewType)
}, },
selectMonth(month) { selectMonth(month) {
this.currentMonth = month; this.currentMonth = month;

1
src/main.js

@ -13,7 +13,6 @@ import 'regenerator-runtime/runtime';
import { directive as clickaway } from 'vue-clickaway'; import { directive as clickaway } from 'vue-clickaway';
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$http = request; Vue.prototype.$http = request;
Vue.prototype.reqUri = '//admin.pengda.checkcopy.com';
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.directive('clickaway', clickaway); Vue.directive('clickaway', clickaway);

Loading…
Cancel
Save