coder-xiaomo/travel-card
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

代码优化

Browse Source
This commit is contained in:
程序员小墨 2022-12-15 18:31:36 +08:00
parent 4997496d9c
commit 59e7742132
1 changed files with 55 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@ -173,14 +173,17 @@
.no { .no {
background-color: #e43b00; background-color: #e43b00;
} }
.text-green { .text-green {
color: #00A766; color: #00A766;
background-color: #CFEEDF; background-color: #CFEEDF;
} }
.text-red { .text-red {
color: #e43b00; color: #e43b00;
background-color: #ffe6dc; background-color: #ffe6dc;
} }
.text-yellow { .text-yellow {
color: #f7ba00; color: #f7ba00;
background-color: #fff4d3; background-color: #fff4d3;
@ -192,7 +195,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="container" :class="card.type==1?'yellow':card.type==0?'':'red'"> <div class="container" :class="cardClass">
<div> <div>
<!-- 用于占位 --> <!-- 用于占位 -->
</div> </div>
@ -202,8 +205,8 @@
</div> </div>
<div class="card"> <div class="card">
<div> <div>
<div :class="card.type==1?'text-yellow':card.type==0?'text-green':'text-red'" style=" height: 20px;"></div> <div :class="`text-${cardClass}`" style=" height: 20px;"></div>
<div :class="card.type==1?'text-yellow':card.type==0?'text-green':'text-red'" style=" <div :class="`text-${cardClass}`" style="
height: 40px; height: 40px;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@ -214,7 +217,7 @@
display: inline-block; display: inline-block;
padding: 0 40px; padding: 0 40px;
letter-spacing: 0.8px;"> letter-spacing: 0.8px;">
请收下{{card.type==1?'黄':card.type==0?'绿':'红'}}色行程卡 请收下{{ cardColor }}色行程卡
</div> </div>
</div> </div>
<div> <div>
@ -226,7 +229,7 @@
</p> </p>
</div> </div>
<div style="display: grid; place-items: center;"> <div style="display: grid; place-items: center;">
<img :src="card.type==1?'./assets/image/yellow-compressed.png':card.type==2?'./assets/image/red-compressed.png':card.type==3?'./assets/image/no-compressed.png':card.type==4?'./assets/image/birthday-compressed.png':'./assets/image/arrow-compressed.png'" style="width: 45%;" class="animate" /> <img :src="cardArrow" style="width: 45%;" class="animate" />
</div> </div>
<div> <div>
<div <div
@ -271,15 +274,15 @@
<template v-for="item in setting"> <template v-for="item in setting">
<div class="setting-title">{{ item.name }}</div> <div class="setting-title">{{ item.name }}</div>
<div class="setting-input" :style="item.more ? {} : { 'grid-column': 'span 2' }"> <div class="setting-input" :style="item.more ? {} : { 'grid-column': 'span 2' }">
<textarea v-if="item.type=='textarea'" v-model="card[item.key]" :maxlength="item.maxlength" <textarea v-if="item.type == 'textarea'" v-model="card[item.key]"
style="width: 100%; resize: none;" rows="3"></textarea> :maxlength="item.maxlength" style="width: 100%; resize: none;"
rows="3"></textarea>
<div v-else-if="item.type == 'radio'"> <div v-else-if="item.type == 'radio'">
<select v-model="card[item.key]"> <select v-model="card[item.key]">
<template v-for="iitem in item.more"> <option v-for="radioItem in item.more" :value="radioItem.value"
<option :selected="card[item.key] == radioItem.value">
:value="iitem.value" {{radioItem.name}}
:selected="card[item.key]==iitem.value"> {{iitem.name}}</option> </option>
</template>
</select> </select>
</div> </div>
<input v-else :placeholder="item.name" :maxlength="item.maxlength" <input v-else :placeholder="item.name" :maxlength="item.maxlength"
@ -373,6 +376,31 @@
] ]
} }
}, },
computed: {
cardColor() {
switch (this.card.type) {
case 0: return "绿"
case 1: return "黄"
default: return "红"
}
},
cardClass() {
switch (this.card.type) {
case 0: return "green"
case 1: return "yellow"
default: return "red"
}
},
cardArrow() {
switch (this.card.type) {
case 1: return './assets/image/yellow-compressed.png'
case 2: return './assets/image/red-compressed.png'
case 3: return './assets/image/no-compressed.png'
case 4: return './assets/image/birthday-compressed.png'
default: return './assets/image/arrow-compressed.png'
}
}
},
methods: { methods: {
toggleSetting(e) { toggleSetting(e) {
console.log(e) console.log(e)