Skip to content

P
pica-new-compaign
提交 c16388dc 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

瓜分云鹊豆弹框静态样式

上级 206c6990
隐藏空白字符变更
内嵌 并排
正在显示 包含 235 行增加 和 2 行删除
components/carve-up/index.vue 0 → 100644
浏览文件 @ c16388dc
<template>
<section class="carve-up-wrap">
<div class="inter-content carve-container" v-if="joinStatus == 1">
<img class="main-bg" src="~/assets/carve-up/main-bg.png" alt="">
<img class="cancel" src="~/assets/icon-dialog-cancel.png" alt="">
</div>
<div class="success-content carve-container" v-else-if="joinStatus == 2">
<div class="success-bg">
<p class="title">
<span class="line1"></span>
<span class="text">恭喜您瓜分</span>
<span class="line2"></span>
</p>
<p class="awards-num">500<span>云鹊豆</span></p>
<div class="btn-content">
<div class="btn btn1">去兑换</div>
<div class="btn btn2">查看排名</div>
</div>
</div>
<img class="cancel" src="~/assets/icon-dialog-cancel.png" alt="">
</div>
<div class="defeat-content carve-container" v-else >
<div class="defeat-bg">
<div class="content content2">
<p class="title">您未参加本次活动</p>
</div>
<!-- <div class="content content1">
<p class="title">很遗憾</p>
<p class="text">您的勤奋分小于100不能瓜分云鹊豆</p>
</div>-->
<div class="know-btn">我知道了</div>
</div>
<img class="cancel" src="~/assets/icon-dialog-cancel.png" alt="">
</div>
</section>
</template>
<script>
export default {
name: "index",
data() {
return {
joinStatus: 2
}
}
}
</script>
<style lang="less" scoped>
.carve-up-wrap {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background:rgba(0,0,0,0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
.carve-container {
display: flex;
flex-flow: column;
align-items: center;
img.cancel {
width: 30px;
height: 30px;
}
}
.inter-content {
img.main-bg {
width: 295.5px;
height: 318.5px;
}
img.cancel {
margin-top: 10px;
}
}
.success-content {
.success-bg {
display: flex;
flex-flow: column;
align-items: center;
width: 300px;
height: 320px;
background: url("../../assets/carve-up/success-bg.png") no-repeat;
background-size: cover;
.title {
display: flex;
align-items: center;
margin-top: 44.5px;
.line1,.line2 {
display: inline-block;
width: 20px;height: 1px;
border-radius: .5px;
}
.line1 {
background:linear-gradient(135deg,rgba(233,210,206,0) 0%,rgba(199,136,140,1) 100%);
}
.line2 {
background:linear-gradient(270deg,rgba(233,210,206,0) 0%,rgba(199,136,140,1) 100%);
}
.text {
color: #7B1A20;
font-size: 13px;
line-height: 13px;
font-weight: 700;
margin: 0 4px;
}
}
.awards-num {
color: #BC1C34;
font-weight: 700;
font-size: 40px;
line-height: 40px;
margin-top: 8px;
display: flex;
align-items: center;
span {
font-size: 14px;
height: 14px;
line-height: 14px;
align-self: flex-end;
margin-bottom: 5.5px;
margin-left: 3px;
}
}
.btn-content {
width: 200px;
margin-top: auto;
margin-bottom: 20px;
.btn {
width: 100%;
height: 44px;
margin: 0 auto;
border-radius: 25.5px;
text-align: center;
font-size: 18px;
line-height: 44px;
font-weight: 700;
}
.btn1 {
color: #7B1A20;
background:linear-gradient(360deg,rgba(245,189,94,1) 0%,rgba(255,224,181,1) 100%);
box-shadow:0px 2px 10px 0px rgba(159,23,35,1);
}
.btn2 {
color: #fff;
position: relative;
margin-top: 10px;
}
.btn2:after {
position: absolute;
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200%;
height:200%;
border: 1PX solid #FFFFFF;
border-radius: 51px;
color: #FFFFFF;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
}
}
img.cancel {
margin-top: 20px;
}
}
.defeat-content {
.defeat-bg {
width: 250px;
height: 275px;
background: url("../../assets/carve-up/defeat-bg.png") no-repeat;
background-size: cover;
display: flex;
flex-flow: column;
align-items: center;
.content {
p {
text-align: center;
}
.title {
color: #373839;
font-size: 18px;
line-height: 18px;
font-weight: 700;
}
.text {
color: #666666;
font-size: 14px;
line-height: 19px;
margin-top: 8px;
}
}
.content1 {
margin-top: 137px;
}
.content2 {
margin-top: 143px;
}
.know-btn {
width: 200px;
height: 44px;
background: linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
border-radius: 25.5px;
font-size: 18px;
font-weight: 700;
line-height: 44px;
text-align: center;
color: #fff;
margin-top: auto;
margin-bottom: 30px;
}
}
img.cancel {
margin-top: 20px;
}
}
}
</style>
\ No newline at end of file
pages/index.vue
浏览文件 @ c16388dc
...@@ -67,6 +67,10 @@ ...@@ -67,6 +67,10 @@
</div> </div>
</div> </div>
<img class="title-text" src="../static/images/award.png"/> <img class="title-text" src="../static/images/award.png"/>
<!--瓜分云鹊豆模块———start-->
<carve-up v-if="showCarveUp">
</carve-up>
<!--瓜分云鹊豆模块 ————end-->
</div> </div>
</template> </template>
...@@ -75,6 +79,7 @@ import TaskActivity from '../components/task-activity'; ...@@ -75,6 +79,7 @@ import TaskActivity from '../components/task-activity';
import Header from '../components/header/index'; import Header from '../components/header/index';
import Step from '../components/step'; import Step from '../components/step';
import StatusBar from '../components/bussiness/status-bar'; import StatusBar from '../components/bussiness/status-bar';
import CarveUp from '../components/carve-up'
import { import {
checkToken, checkToken,
selectAppModuleParam, selectAppModuleParam,
...@@ -88,7 +93,8 @@ export default { ...@@ -88,7 +93,8 @@ export default {
TaskActivity, TaskActivity,
Header, Header,
Step, Step,
StatusBar StatusBar,
CarveUp
}, },
data() { data() {
return { return {
...@@ -117,7 +123,8 @@ export default { ...@@ -117,7 +123,8 @@ export default {
stepTime3:'4月3日10:00-4月7日16:00', stepTime3:'4月3日10:00-4月7日16:00',
maxValue: 200, maxValue: 200,
myAvatarl: '', myAvatarl: '',
myScore: 0 myScore: 0,
showCarveUp: false, //是否展示瓜分弹框
} }
}, },
async asyncData({ $axios }) { async asyncData({ $axios }) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或