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

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

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

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

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

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

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