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