fix
This commit is contained in:
huangjinming
parent
a629309f6c
commit
25f07510ff
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<img class="logo"
|
||||
src="data:image/svg+xml,%3csvg width='71' height='64' viewBox='0 0 71 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath d='M4.75 42.4667L12.7348 0H49.75L66.25 12.5L57.8258 56H18.3712L4.75 42.4667Z' fill='%2307011D'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.75' y='0' width='69.5' height='64' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='4'/%3e %3cfeGaussianBlur stdDeviation='2'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e">
|
||||
<img
|
||||
class="logo"
|
||||
src="data:image/svg+xml,%3csvg width='71' height='64' viewBox='0 0 71 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath d='M4.75 42.4667L12.7348 0H49.75L66.25 12.5L57.8258 56H18.3712L4.75 42.4667Z' fill='%2307011D'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.75' y='0' width='69.5' height='64' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='4'/%3e %3cfeGaussianBlur stdDeviation='2'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e"
|
||||
/>
|
||||
<span class="level">LEVEL</span>
|
||||
<span class="value">1</span></div>
|
||||
<span class="value">1</span>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({
|
||||
name: 'HeroLevel',
|
||||
components: {}
|
||||
name: "HeroLevel",
|
||||
components: {},
|
||||
})
|
||||
export default class extends Vue {
|
||||
}
|
||||
export default class extends Vue {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.root {
|
||||
|
||||
@ -1,18 +1,5 @@
|
||||
<template>
|
||||
<div class="containers">
|
||||
<!-- <div class="filter"></div>
|
||||
<div class="search-content">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="hero"
|
||||
:maxlength="24"
|
||||
placeholder="Search Name or Tokenid"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="search-btn" @click="searchClear"></div>
|
||||
</div>
|
||||
<div class="seach-input"></div> -->
|
||||
<div class="job-content">
|
||||
<div class="job">
|
||||
<img src="../../../assets/market/filter-left/job.png" alt="" />
|
||||
@ -20,13 +7,8 @@
|
||||
<div class="job-options">
|
||||
<div class="job-item" v-for="(item, i) in jobList" :key="i">
|
||||
<div class="job-status" @click="jobStatus(item)">
|
||||
<img
|
||||
|
||||
v-if="item.jobType === true"
|
||||
:src="item.jobImg"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else :src="item.disImg" alt="" />
|
||||
<img v-if="item.jobType === true" :src="item.jobImg" alt="" />
|
||||
<img v-else :src="item.disImg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +17,11 @@
|
||||
<div class="level-item">
|
||||
<div class="btn-bg">Quility</div>
|
||||
<div class="level-slider">
|
||||
<div><Slider :max="15" :min="0" :value="7"></Slider></div>
|
||||
<div class="slider">
|
||||
<!-- <el-slider :min="0" height="190" :max="15" v-model="value2">
|
||||
</el-slider> -->
|
||||
<Slider :min="0" :max="15" v-model="value"></Slider>
|
||||
</div>
|
||||
<div class="slider-number">
|
||||
<div>0</div>
|
||||
<div>15</div>
|
||||
@ -45,7 +31,10 @@
|
||||
<div class="level-item">
|
||||
<div class="btn-bg">2</div>
|
||||
<div class="level-slider">
|
||||
<div><Slider :max="15" :min="0" :value="7"></Slider></div>
|
||||
<div class="slider">
|
||||
<!-- <el-slider height="190" :min="0" :max="15" v-model="value" /> -->
|
||||
<Slider :min="0" :max="15" v-model="value2"></Slider>
|
||||
</div>
|
||||
<div class="slider-number">
|
||||
<div>0</div>
|
||||
<div>15</div>
|
||||
@ -55,7 +44,10 @@
|
||||
<div class="level-item">
|
||||
<div class="btn-bg">3</div>
|
||||
<div class="level-slider">
|
||||
<div><Slider :max="15" :min="0" :value="7"></Slider></div>
|
||||
<div class="slider">
|
||||
<!-- <el-slider height="190" :min="0" :max="15" v-model="value3" /> -->
|
||||
<Slider :min="0" :max="15" v-model="value3"></Slider>
|
||||
</div>
|
||||
<div class="slider-number">
|
||||
<div>0</div>
|
||||
<div>15</div>
|
||||
@ -87,7 +79,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Slider from "../../market/Slider.vue";
|
||||
import Slider from "./Slider.vue";
|
||||
export default {
|
||||
components: {
|
||||
Slider,
|
||||
@ -96,6 +88,9 @@ export default {
|
||||
return {
|
||||
hero: "",
|
||||
priceMin: "",
|
||||
value2: 7,
|
||||
value3: 7,
|
||||
value: 7,
|
||||
priceMax: "",
|
||||
jobList: [
|
||||
{
|
||||
@ -129,6 +124,9 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// document.getElementsByClassName("el-slider__button")[0].childNodes[0].nodeValue = "跳转";
|
||||
},
|
||||
methods: {
|
||||
jobStatus(item) {
|
||||
this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
|
||||
@ -149,6 +147,7 @@ export default {
|
||||
width: 734px;
|
||||
height: 1428px;
|
||||
background: rgba(26, 40, 57, 0.86);
|
||||
transition: transform linear 0.2s, opacity linear 0.2s;
|
||||
border-radius: 40px;
|
||||
margin-top: 49px;
|
||||
margin-bottom: 14px;
|
||||
@ -157,9 +156,10 @@ export default {
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
height: 58px;
|
||||
// background: url("../../../assets/market/filter-left/filter-bg.png")
|
||||
// no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
.slider {
|
||||
width: 600px;
|
||||
height: 19px;
|
||||
}
|
||||
.search-content {
|
||||
display: flex;
|
||||
@ -208,7 +208,7 @@ export default {
|
||||
.job-status {
|
||||
width: 139px;
|
||||
height: 151px;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -234,7 +234,7 @@ export default {
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 70px;
|
||||
line-height: 90px;
|
||||
height: 90px;
|
||||
background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
|
||||
@ -251,7 +251,7 @@ export default {
|
||||
margin-left: 23px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
.price-btn {
|
||||
width: 271px;
|
||||
font-size: 24px;
|
||||
@ -295,6 +295,7 @@ export default {
|
||||
width: 633px;
|
||||
height: 73px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
::v-deep .el-input__inner {
|
||||
background: transparent;
|
||||
height: 60px;
|
||||
@ -308,7 +309,7 @@ export default {
|
||||
}
|
||||
.boder {
|
||||
margin-top: 15px;
|
||||
width: 20px;
|
||||
width: 45px;
|
||||
margin-right: 11px;
|
||||
margin-left: 11px;
|
||||
background: #ffffff;
|
||||
@ -329,4 +330,23 @@ export default {
|
||||
line-height: 33px !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-slider__bar {
|
||||
background: transparent;
|
||||
height: 19px !important;
|
||||
}
|
||||
::v-deep .el-slider__runway {
|
||||
height: 19px !important;
|
||||
}
|
||||
::v-deep .el-slider__button {
|
||||
width: 77px;
|
||||
height: 34px;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background: url("../../../assets/market/filter-left/tips.png") no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
89
src/components/mobile/main/Slider.vue
Normal file
89
src/components/mobile/main/Slider.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="my-slider">
|
||||
<div class="my-slider__tooltip" :style="style">
|
||||
<div class="my-slider__tooltip-wrapper">
|
||||
{{ slider }}
|
||||
</div>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="slider"
|
||||
:format-tooltip="(value) => `${value}`"
|
||||
:show-tooltip="false"
|
||||
:min="min"
|
||||
:max="max"
|
||||
@input="input"
|
||||
></el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MySlider",
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "change",
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slider: this.value,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.slider = newValue;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const length = this.max - this.min,
|
||||
progress = this.slider - this.min,
|
||||
left = (progress / length) * 100;
|
||||
return {
|
||||
paddingLeft: `${left}%`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
input(value) {
|
||||
this.$emit("change", value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-slider {
|
||||
position: relative;
|
||||
.my-slider__tooltip {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: 999;
|
||||
text-align: left;
|
||||
.my-slider__tooltip-wrapper {
|
||||
width: 7.5vw;
|
||||
height: 3.6vw;
|
||||
font-size: 0.6rem;
|
||||
color: #2bcced;
|
||||
text-align: center;
|
||||
background: url("../../../assets/market/filter-left/tips.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: translateX(-50%);
|
||||
top: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -163,18 +163,18 @@
|
||||
<div class="hero-item hero-item-hp">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/hp.png" alt="" />
|
||||
<img src="../../../assets/market/hero/attack.png" alt="" />
|
||||
</div>
|
||||
<div>HP</div>
|
||||
<div>ATTACK</div>
|
||||
</div>
|
||||
<div>9999</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-attack">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/attack.png" alt="" />
|
||||
<img src="../../../assets/market/weapon/range.png" alt="" />
|
||||
</div>
|
||||
<div>TTACK</div>
|
||||
<div>RANGE</div>
|
||||
</div>
|
||||
<div>1234.56</div>
|
||||
</div>
|
||||
@ -182,13 +182,31 @@
|
||||
<div class="hero-item hero-item-def">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/def.png" alt="" />
|
||||
<img src="../../../assets/market/weapon/rate.png" alt="" />
|
||||
</div>
|
||||
<div>DEFENCE</div>
|
||||
<div>REAT</div>
|
||||
</div>
|
||||
<div>1234.56</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-cri">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/weapon/clip.png" alt="" />
|
||||
</div>
|
||||
<div>CLIP</div>
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-criDam">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/weapon/reload.png" alt="" />
|
||||
</div>
|
||||
<div>RELOAD</div>
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-dodge">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/cri.png" alt="" />
|
||||
@ -197,39 +215,31 @@
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-criDam">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/criDam.png" alt="" />
|
||||
</div>
|
||||
<div>CRI DAMAGE</div>
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-dodge">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/dodge.png" alt="" />
|
||||
</div>
|
||||
<div>DODGE</div>
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-reduces">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/reduces.png" alt="" />
|
||||
<img src="../../../assets/market/hero/criDam.png" alt="" />
|
||||
</div>
|
||||
<div>RUDUCE</div>
|
||||
</div>
|
||||
<div>99.99%</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-item hero-item-speed">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/hero/speed.png" alt="" />
|
||||
<img src="../../../assets/market/weapon/brain.png" alt="" />
|
||||
</div>
|
||||
<div>SPEED</div>
|
||||
<div> BRAIN LIFE PCT</div>
|
||||
</div>
|
||||
<div>6</div>
|
||||
</div>
|
||||
<div class="hero-item hero-item-speed">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="../../../assets/market/weapon/bulletSpeed.png" alt="" />
|
||||
</div>
|
||||
<div>BULLET SPEED</div>
|
||||
</div>
|
||||
<div>6</div>
|
||||
</div>
|
||||
@ -636,25 +646,28 @@ export default {
|
||||
}
|
||||
}
|
||||
.hero-item-hp {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-attack {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-def {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-cri {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-criDam {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-dodge {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-reduces {
|
||||
margin-bottom: 23px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.hero-item-speed{
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,11 +5,20 @@
|
||||
<div class="filter" @click="handFilter">
|
||||
<img src="../../assets/mobile/market/hero/fiter.png" alt="" />
|
||||
</div>
|
||||
<div class="search"></div>
|
||||
<div class="clear">
|
||||
<div class="search">
|
||||
<el-input
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="hero"
|
||||
:maxlength="24"
|
||||
placeholder="Search Name or Tokenid"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="clear" @click="handClear">
|
||||
<img src="../../assets/mobile/market/hero/clear.png" alt="" />
|
||||
</div>
|
||||
<Herofilter v-show="isFiters" class="filter-modal"></Herofilter>
|
||||
<Transition>
|
||||
<Herofilter v-show="isFiters" class="filter-modal"></Herofilter
|
||||
></Transition>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
@ -17,7 +26,6 @@
|
||||
v-for="(s, i) in types"
|
||||
:key="i"
|
||||
:class="{ active: s.id === curId }"
|
||||
|
||||
>
|
||||
<img @click="onClickItem(s)" :src="s.Image" alt="" width="162px" />
|
||||
</div>
|
||||
@ -56,6 +64,7 @@ import HeroList from "../../components/mobile/main/HeroList.vue";
|
||||
import WeaponList from "../../components/mobile/main/WeaponList";
|
||||
import ChipList from "../../components/mobile/main/ChipList";
|
||||
import Herofilter from "../../components/mobile/main/Herofilter.vue";
|
||||
import MySlider from "@/components/mobile/main/Slider.vue";
|
||||
export default {
|
||||
components: {
|
||||
mobileHeader,
|
||||
@ -63,12 +72,14 @@ export default {
|
||||
HeroList,
|
||||
Herofilter,
|
||||
WeaponList,
|
||||
ChipList
|
||||
ChipList,
|
||||
MySlider,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curId: 0,
|
||||
isFiters:false,
|
||||
hero: "",
|
||||
isFiters: false,
|
||||
types: [
|
||||
{ id: 0, Image: require("../../assets/mobile/market/hero.png") },
|
||||
{ id: 1, Image: require("../../assets/mobile/market/weapon.png") },
|
||||
@ -104,7 +115,10 @@ export default {
|
||||
this.curId = s.id;
|
||||
},
|
||||
handFilter(s) {
|
||||
this.isFiters = !this.isFiters
|
||||
this.isFiters = !this.isFiters;
|
||||
},
|
||||
handClear() {
|
||||
this.hero = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -118,17 +132,28 @@ $item-size: 22px;
|
||||
// height: 100vh;
|
||||
background: url("../../assets/mobile/market/bg.png") no-repeat;
|
||||
.search {
|
||||
width: 500px;
|
||||
width: 575px;
|
||||
height: 81px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px 10px 10px 20px;
|
||||
::v-deep .el-input__inner {
|
||||
background: transparent;
|
||||
height: 81px;
|
||||
// padding-left: 60px;
|
||||
color: #474545;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner::placeholder {
|
||||
color: #c1c1c1;
|
||||
// text-align: center;
|
||||
}
|
||||
::v-deep .el-input__icon {
|
||||
line-height: 79px !important;
|
||||
}
|
||||
::v-deep .el-input__prefix {
|
||||
left: 55px;
|
||||
}
|
||||
}
|
||||
// .container .search[data-v-7077e23f] {
|
||||
// width: 46.296296vw;
|
||||
// height: 7.5vw;
|
||||
// background: #ffffff;
|
||||
// border-radius: 1.851852vw 0.925926vw 0.925926vw 1.851852vw;
|
||||
// }
|
||||
.filter {
|
||||
width: 255px;
|
||||
height: 81px;
|
||||
@ -154,13 +179,13 @@ $item-size: 22px;
|
||||
.filter-top {
|
||||
display: flex;
|
||||
padding-top: 145px;
|
||||
margin-left: 45px;
|
||||
margin-left: 25px;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
.filter-modal{
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left:-11px ;
|
||||
.filter-modal {
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@ -252,5 +277,30 @@ $item-size: 22px;
|
||||
font-size: $item-size;
|
||||
}
|
||||
}
|
||||
|
||||
// .v-enter-active,
|
||||
// .v-leave-active {
|
||||
// transition: opacity 0.5s ease;
|
||||
// }
|
||||
|
||||
// .v-enter-from,
|
||||
// .v-leave-to {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-to,
|
||||
.v-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user