op-admin/maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css change

Browse Source
This commit is contained in:
yuexin 2019-12-02 20:33:34 +08:00
parent 11855989d9
commit 6647a3910c
5 changed files with 1869 additions and 1863 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3614
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
src/components/list-item.vue
View File

@ -73,7 +73,7 @@ export default {
white-space: nowrap;
overflow: hidden;
font-weight: 700;
font-size: 32rpx;
font-size: 36rpx;
}
.num {
font-size: 24rpx;
@ -81,10 +81,10 @@ export default {
}
}
.desc {
max-height: 42px;
max-height: 48px;
margin: 8rpx 0;
color: #999;
font-size: 28rpx;
font-size: 32rpx;
line-height: 1.5;
overflow: hidden;
}

30
src/pages/details/index.vue
View File

@ -5,15 +5,15 @@
<div class="sec-1">
<div class="wrap">
<div class="title">
<span class="color-white">输入</span>
<span>关键词</span>
<span class="color-white">测试</span>
<span>题目</span>
</div>
<div class="card">
<div class="card-hd">{{maker.title}}</div>
<div class="card-bd">
<div class="card-cont">{{maker.desc}}</div>
<div class="card-ipt-wrap">
<input class="card-ipt" placeholder="输入你的名字" type="text" v-model="users" />
<input class="card-ipt" placeholder="点击输入你的名字" type="text" v-model="users" />
</div>
<div @click="getResult" class="card-btn">GO</div>
</div>
@ -90,7 +90,7 @@ export default {
getResult() {
if (!this.users) {
wx.showToast({
title: '请填写名字', //提示的内容,
title: '请先填写名字', //提示的内容,
icon: 'none',
duration: 2000, //延迟时间,
mask: true, //显示透明蒙层，防止触摸穿透,
@ -110,7 +110,7 @@ export default {
<style lang="less" scoped>
.p-details {
.main {
padding: 80rpx 32rpx 60rpx;
padding: 40rpx 32rpx 60rpx;
}
.sec-1 {
.wrap {
@ -122,13 +122,13 @@ export default {
}
.title {
position: absolute;
transform: translateX(-50%);
top: -50rpx;
left: 50%;
height: 100rpx;
transform: translateX(0%);
top: -2rpx;
left: -2rpx;
height: 64rpx;
padding: 0 32rpx;
font-size: 48rpx;
line-height: 100rpx;
font-size: 32rpx;
line-height: 64rpx;
font-weight: 700;
background-color: #ffdc34;
}
@ -148,19 +148,19 @@ export default {
.card-cont {
margin-bottom: 32rpx;
text-indent: 2em;
font-size: 48rpx;
text-indent: 1em;
font-size: 42rpx;
}
}
.card-ipt-wrap {
width: 70%;
width: 80%;
margin: 24rpx auto;
.card-ipt {
margin-bottom: 10rpx;
height: 60rpx;
color: #333;
border-bottom: 1px solid #ffdc34;
font-size: 60rpx;
font-size: 48rpx;
line-height: 60rpx;
}

40
src/pages/index/index.vue
View File

@ -14,7 +14,7 @@
<div class="wrap">
<div class="title">
<div class="l">
<span class="color-white">精选</span>
<span>精选</span>
<span>推荐</span>
</div>
<div @click="changeRecommand" class="r">
@ -37,7 +37,7 @@
<div class="sec-2" v-if="listData.length > 0">
<div class="title">
<div class="l">
<span class="color-yellow">测试</span>排行
排行榜
</div>
<div @click="goList" class="color-yellow more">更多>></div>
</div>
@ -47,12 +47,12 @@
:class="curActive==='hot' ? 'active' : ''"
@click="changeList('hot')"
class="hot"
>最热</div>
>热门排行</div>
<div
:class="curActive==='new' ? 'active' : ''"
@click="changeList('new')"
class="new"
>最新</div>
>新品排行</div>
</div>
<div class="list-bd">
<list-item
@ -218,33 +218,34 @@ export default {
}
}
.sec-1 {
margin-top: 80rpx;
margin-top: 60rpx;
.wrap {
position: relative;
height: 300rpx;
margin: 0 auto;
padding: 60rpx 32rpx 80rpx;
padding: 90rpx 32rpx 90rpx;
background-color: #fffdf5;
border: 4px solid #ffdc34;
}
.title {
.l {
position: absolute;
top: -40rpx;
left: 48rpx;
top: -2rpx;
left: -2rpx;
height: 80rpx;
padding: 0 32rpx;
font-size: 36rpx;
line-height: 80rpx;
font-weight: 700;
background-color: #ffdc34;
color: #B8860B;
}
.r {
position: absolute;
padding: 8rpx;
height: 36rpx;
width: 36rpx;
height: 48rpx;
width: 48rpx;
right: -26rpx;
top: -26rpx;
font-size: 0;
@ -264,12 +265,13 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 42rpx;
}
.card-bd {
color: #999;
max-height: 192rpx;
max-height: 216rpx;
line-height: 1.5;
font-size: 32rpx;
font-size: 36rpx;
overflow: hidden;
}
.card-btn {
@ -301,15 +303,20 @@ export default {
justify-content: space-between;
align-items: center;
.l {
font-size: 48rpx;
font-size: 28rpx;
font-weight: 700;
background-color:#ffdc34;
height:48rpx;
padding:0rpx 32rpx;
line-height:48rpx;
color:#FAFAD2;
}
.r {
}
}
.list {
background-color: #fff;
border: 4rpx solid #ffdc34;
border: 6rpx solid #ffdc34;
.list-hd {
display: flex;
justify-content: space-between;
@ -317,6 +324,7 @@ export default {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1px solid #f0f0f0;
font-size:36rpx;
.hot {
flex: 1;
text-align: center;
@ -342,5 +350,9 @@ export default {
width: 100%;
letter-spacing: 4rpx;
}
.more {
font-weight: 700;
font-size:28rpx;
}
}
</style>

42
src/pages/result/index.vue
View File

@ -5,7 +5,7 @@
<div class="sec-1">
<div class="wrap">
<div class="title">
<span class="color-white">你的</span>
<span class="color-white">测试</span>
<span>结果</span>
</div>
<div class="card">
@ -106,7 +106,7 @@ export default {
const palette = {
background: '#eee',
width: '750rpx',
height: '850rpx',
height: '1334rpx',
views: [
{
type: 'image',
@ -115,32 +115,32 @@ export default {
top: '0rpx',
left: '0rpx',
width: '750rpx',
height: '850rpx'
height: '1334rpx'
}
},
{
type: 'text',
text: this.title,
css: {
top: '64rpx',
left: '100rpx',
width: '550rpx',
top: '100rpx',
left: '0rpx',
width: '750rpx',
color: '#000000',
textAlign: 'center',
fontSize: '48rpx',
fontSize: '52rpx',
fontWeight: 'bold',
lineHeight: '58rpx'
lineHeight: '64rpx'
}
},
{
type: 'text',
text: this.result.join(''),
text: this.result.join('\n'),
css: {
top: '220rpx',
left: '100rpx',
width: '550rpx',
color: '#000000',
lineHeight: '48rpx',
lineHeight: '72rpx',
fontSize: '48rpx'
}
},
@ -276,7 +276,7 @@ export default {
<style lang="less" scoped>
.p-result {
.main {
padding: 80rpx 32rpx 60rpx;
padding: 40rpx 20rpx 60rpx;
}
.sec-1 {
.wrap {
@ -288,20 +288,20 @@ export default {
}
.title {
position: absolute;
transform: translateX(-50%);
top: -50rpx;
left: 50%;
height: 100rpx;
transform: translateX(0%);
top: -2rpx;
left: -2rpx;
height: 64rpx;
padding: 0 32rpx;
font-size: 48rpx;
line-height: 100rpx;
font-size: 32rpx;
line-height: 64rpx;
font-weight: 700;
background-color: #ffdc34;
}
.card {
.card-hd {
margin-bottom: 16rpx;
margin-bottom: 0rpx;
text-align: center;
font-size: 48rpx;
font-weight: 700;
@ -311,9 +311,9 @@ export default {
font-size: 32rpx;
.card-cont {
margin: 48rpx 0;
text-indent: 2em;
font-size: 48rpx;
margin: 12rpx 0;
text-indent: 1em;
font-size: 42rpx;
}
.card-btn {