修改UI
This commit is contained in:
parent
7e478003f5
commit
4725567f23
@ -12,8 +12,10 @@
|
||||
<div class="card-hd">{{maker.title}}</div>
|
||||
<div class="card-bd">
|
||||
<div class="card-cont">{{maker.desc}}</div>
|
||||
<input class="card-ipt" placeholder="输入一个名称" type="text" v-model="users" />
|
||||
<div class="card-ipt-tip">输入名称、物品或任何文字</div>
|
||||
<div class="card-ipt-wrap">
|
||||
<input class="card-ipt" placeholder="输入想要测试的名字" type="text" v-model="users" />
|
||||
<div class="card-ipt-tip">可输入任何文字</div>
|
||||
</div>
|
||||
<div @click="getResult" class="card-btn">GO</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,8 +25,8 @@
|
||||
<div class="sec-2">
|
||||
<div class="list">
|
||||
<div class="list-hd">
|
||||
<div class="l">大家都在玩</div>
|
||||
<div @click="goList" class="r">more>></div>
|
||||
<div class="l">大家都在测</div>
|
||||
<div @click="goList" class="r">更多>></div>
|
||||
</div>
|
||||
<div class="list-bd">
|
||||
<list-item :data="item" :key="index" v-for="(item, index) in hotList"></list-item>
|
||||
@ -150,14 +152,19 @@ export default {
|
||||
text-indent: 2em;
|
||||
}
|
||||
}
|
||||
.card-ipt {
|
||||
height: 42rpx;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.card-ipt-wrap {
|
||||
width: 70%;
|
||||
margin: 24rpx auto;
|
||||
.card-ipt {
|
||||
margin-bottom: 10rpx;
|
||||
height: 48rpx;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.card-ipt-tip {
|
||||
font-size: 24rpx;
|
||||
.card-ipt-tip {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
@ -188,7 +195,6 @@ export default {
|
||||
.list {
|
||||
background-color: #fff;
|
||||
border: 4rpx solid #ffdc34;
|
||||
border-radius: 16rpx;
|
||||
.list-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -14,8 +14,8 @@
|
||||
<div class="wrap">
|
||||
<div class="title">
|
||||
<div class="l">
|
||||
<span class="color-white">热门</span>
|
||||
<span>精选</span>
|
||||
<span class="color-white">精选</span>
|
||||
<span>推荐</span>
|
||||
</div>
|
||||
<div @click="changeRecommand" class="r">
|
||||
<image
|
||||
@ -37,9 +37,9 @@
|
||||
<div class="sec-2" v-if="listData.length > 0">
|
||||
<div class="title">
|
||||
<div class="l">
|
||||
<span class="color-yellow">HOT</span>NEW
|
||||
<span class="color-yellow">测试</span>排行
|
||||
</div>
|
||||
<div @click="goList" class="color-yellow more">more>></div>
|
||||
<div @click="goList" class="color-yellow more">更多>></div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-hd">
|
||||
@ -206,7 +206,7 @@ export default {
|
||||
position: relative;
|
||||
height: 300rpx;
|
||||
margin: 0 auto;
|
||||
padding: 60rpx 32rpx;
|
||||
padding: 60rpx 32rpx 80rpx;
|
||||
background-color: #fffdf5;
|
||||
border: 4px solid #ffdc34;
|
||||
}
|
||||
@ -225,10 +225,10 @@ export default {
|
||||
.r {
|
||||
position: absolute;
|
||||
padding: 8rpx;
|
||||
height: 32rpx;
|
||||
width: 32rpx;
|
||||
right: -20rpx;
|
||||
top: -20rpx;
|
||||
height: 36rpx;
|
||||
width: 36rpx;
|
||||
right: -26rpx;
|
||||
top: -26rpx;
|
||||
font-size: 0;
|
||||
background-color: #ffdc34;
|
||||
border-radius: 50%;
|
||||
@ -258,11 +258,12 @@ export default {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
bottom: 32rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
line-height: 96rpx;
|
||||
line-height: 108rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
@ -291,7 +292,6 @@ export default {
|
||||
.list {
|
||||
background-color: #fff;
|
||||
border: 4rpx solid #ffdc34;
|
||||
border-radius: 16rpx;
|
||||
.list-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -160,7 +160,6 @@ export default {
|
||||
.sec-2 {
|
||||
margin: 60rpx 0 60rpx;
|
||||
border: 4rpx solid #ffdc34;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
.list-hd {
|
||||
height: 80rpx;
|
||||
|
@ -49,8 +49,8 @@
|
||||
<div class="sec-2">
|
||||
<div class="list">
|
||||
<div class="list-hd">
|
||||
<div class="l">大家都在玩</div>
|
||||
<div @click="goList" class="r">more>></div>
|
||||
<div class="l">大家都在测</div>
|
||||
<div @click="goList" class="r">更多>></div>
|
||||
</div>
|
||||
<div class="list-bd">
|
||||
<list-item :data="item" :key="index" v-for="(item, index) in hotList"></list-item>
|
||||
@ -311,7 +311,6 @@ export default {
|
||||
.list {
|
||||
background-color: #fff;
|
||||
border: 4rpx solid #ffdc34;
|
||||
border-radius: 16rpx;
|
||||
.list-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -162,10 +162,10 @@ export default {
|
||||
.del {
|
||||
position: absolute;
|
||||
padding: 8rpx;
|
||||
height: 32rpx;
|
||||
width: 32rpx;
|
||||
right: -20rpx;
|
||||
top: -20rpx;
|
||||
height: 36rpx;
|
||||
width: 36rpx;
|
||||
right: -24rpx;
|
||||
top: -24rpx;
|
||||
font-size: 0;
|
||||
background-color: #ffdc34;
|
||||
border-radius: 50%;
|
||||
@ -209,7 +209,6 @@ export default {
|
||||
.sec-3 {
|
||||
margin: 0 0 80rpx;
|
||||
border: 4rpx solid #ffdc34;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
.list-hd {
|
||||
height: 80rpx;
|
||||
|
Loading…
x
Reference in New Issue
Block a user