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