parent
f211f58792
commit
7c44da4fa2
4 changed files with 327 additions and 0 deletions
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,207 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/会员中心</p> |
||||
<div> |
||||
<el-button type="primary" |
||||
@click="preview">预览</el-button> |
||||
<el-button @click="save(0)">保存为草稿</el-button> |
||||
<el-button type="primary" |
||||
@click="save(1)">发布</el-button> |
||||
<el-button @click="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="reg"> |
||||
<div class="equity-wrap"> |
||||
<img class="logo" |
||||
src="@/assets/images/logo1.png" |
||||
alt=""> |
||||
<div class="equity"> |
||||
<h6> |
||||
会员<em>专享权益</em> |
||||
</h6> |
||||
<div class="c-wrap"> |
||||
<ul class="step"> |
||||
<template v-for="(item, i) in modules[0].list"> |
||||
<li v-if="item.isEnable" |
||||
:key="i">{{ item.title }}</li> |
||||
</template> |
||||
</ul> |
||||
<div class="cover" |
||||
@click="toSet(0)">点击更改标题</div> |
||||
</div> |
||||
<div class="c-wrap m-b-20"> |
||||
<div class="member-des" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改描述</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<ul class="param"> |
||||
<li v-for="(item, i) in modules[2].list" |
||||
:key="i"> |
||||
<img :src="item.pic" |
||||
alt=""> |
||||
<p class="name">{{ item.name }}</p> |
||||
<p class="des">{{ item.des }}</p> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改图片、标题与描述</div> |
||||
</div> |
||||
<div class="btn">立即注册 | 0元成会员</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.member, |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '会员中心' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.reg { |
||||
padding-bottom: 50px; |
||||
background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat; |
||||
.equity-wrap { |
||||
width: 1190px; |
||||
padding-top: 20px; |
||||
margin: 0 auto; |
||||
} |
||||
.logo { |
||||
width: 150px; |
||||
} |
||||
.equity { |
||||
min-height: 614px; |
||||
margin-top: 20px; |
||||
background: url(https://www.occupationlab.com/images/member/2.jpg) 0 0/100% 100% no-repeat; |
||||
background-color: #111d42; |
||||
border-radius: 24px 18px 18px 18px; |
||||
box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3); |
||||
overflow: hidden; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
margin: 60px 0 39px; |
||||
font-size: 2rem; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
color: #fff; |
||||
em { |
||||
font-style: normal; |
||||
color: #e3b871; |
||||
} |
||||
&:after { |
||||
content: 'VIP'; |
||||
position: absolute; |
||||
top: -37px; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 6rem; |
||||
font-weight: 700; |
||||
color: hsla(0, 0%, 100%, 0.05); |
||||
} |
||||
} |
||||
.step { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 0 60px 0 100px; |
||||
li { |
||||
position: relative; |
||||
font-size: 1.4rem; |
||||
color: #fff; |
||||
&:before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 5px; |
||||
left: -34px; |
||||
width: 24px; |
||||
height: 24px; |
||||
background: url(https://www.occupationlab.com/images/member/3.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
} |
||||
} |
||||
.member-des { |
||||
margin-top: 25px; |
||||
font-size: 1rem; |
||||
text-align: center; |
||||
color: #fff; |
||||
} |
||||
.param { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
padding: 0 120px; |
||||
li { |
||||
width: 33.33%; |
||||
padding: 20px 30px; |
||||
text-align: center; |
||||
.name { |
||||
margin: 10px 0 10px; |
||||
font-size: 1.1rem; |
||||
color: #fff; |
||||
} |
||||
.des { |
||||
font-size: 0.9rem; |
||||
line-height: 1.6; |
||||
color: hsla(0, 0%, 100%, 0.7); |
||||
} |
||||
} |
||||
} |
||||
.btn { |
||||
width: 400px; |
||||
height: 72px; |
||||
margin: 30px auto; |
||||
font-size: 24px; |
||||
color: #13192e; |
||||
font-weight: 600; |
||||
line-height: 72px; |
||||
text-align: center; |
||||
background-color: #e3b871; |
||||
background-image: linear-gradient(233.36deg, #e8ce8c, #f3c169); |
||||
border-radius: 38px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue