Skip to content

kaisa / SopWeb

Go to a project
Commit daf4c154 by kaisa
Options

feat:更新sop主播招募樣式

parent 1cc2c8e1
Inline Side-by-side
Showing with 700 additions and 36 deletions
src/assets/fonts/fonts.css
/* 字体 */
@font-face {
font-family: 'FZZYFT';
src: url('./方正综艺繁体.ttf');
font-family: 'FZZongYi';
src: url('./FZZongYi-M05T.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/views/activity/recruitment/components/sign/index.vue
......@@ -8,6 +8,14 @@ const pickerValue = ref([])
const columns = [
{ text: '杭州', value: 'Hangzhou' },
];
// 进度条
const currentProgress = ref(33.33); // 默认显示第一阶段
const stages = [
{ label: '試合作', value: 33.33 },
{ label: '中期合作', value: 66.66 },
{ label: '長期合作', value: 100 }
];
const onConfirm = ({ selectedValues }: any) => {
console.log(selectedValues, '~');
......@@ -19,52 +27,106 @@ const onSubmit = (values: any) => {
console.log('submit', values);
};
const isShow = ref(false);
</script>
<template>
<div class="review-wrap">
<div class="header">
公會合作邀請
</div>
<div class="sign-wrap">
<div class="content">
<!-- 合作階段 -->
<div class="stage" v-show="isShow">
<div class="stage-text">
<div class="stage-title">合作階段説明：</div>
<div class="stage">
<div class="stage-title">
<div class="stage-title-wrap">
<span>合作階段</span>
</div>
</div>
<div class="text-content">
<span>試合作：初期合作嘗試，爲期15天</span>
<span>中期合作：試合作滿15天后，雙方協商是否進入中期合作階段</span>
<span>長期合作：中期合作結束後（獲得200w螢火），雙方協商是否進入長期合作階段</span>
<div class="stage-progress">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: currentProgress + '%' }"></div>
</div>
<div class="progress-markers">
<div class="marker" v-for="(stage, index) in stages" :key="index">
<img src="../../image/down.png" alt="">
<span class="active">{{ stage.label }}</span>
</div>
</div>
</div>
<div class="content-overflow">
<div class="content-title">
<div class="dot"></div>
合作階段説明
</div>
<div class="content-wrap">
<div>
<span class="content-tip">試合作：</span>
<span class="content-text">初期合作嘗試，爲期15天</span>
</div>
<div>
<span class="content-tip">中期合作：</span>
<span class="content-text">試合作滿15天后，雙方協商是否進入中期合作階段</span>
</div>
<div>
<span class="content-tip">長期合作：</span>
<span class="content-text">中期合作結束後（獲得200w螢火），雙方協商是否進入長期合作階段</span>
</div>
</div>
</div>
</div>
<div class="bg-bottom"></div>
</div>
<!-- 簽約流程 -->
<div class="sign" v-show="isShow">
<div class="sign">
<div class="sign-title">
試合作簽約流程
<div class="sign-title-wrap">
<span>試合作簽約流程</span>
</div>
</div>
<div class="sign-center">
<img src="../../image/progress.png" alt="">
<div class="text-wrap">
<div class="normal">公會邀請</div>
<div class="active">填寫信息</div>
<div class="sign-item">公會審核</div>
<div class="sign-item">簽約成功</div>
</div>
</div>
<div class="sign-bottom"></div>
</div>
<!-- 規則 -->
<div class="rule" v-show="isShow">
<div class="rule">
<div class="rule-item">
<div class="rule-item-title">公會介紹</div>
<div class="rule-item-title">
<span>公會介紹</span>
</div>
<div class="rule-item-content">
我們的公會立足華人地區（除中國大陸），擁有大量粉絲資源。公會運營多年，培育出大量高收入主播。我們希望能和你在直播運營上開展合作。
<span>我們的公會立足華人地區（除中國大陸），擁有大量粉絲資源。公會運營多年，培育出大量高收入主播。我們希望能和你在直播運營上開展合作。</span>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<div class="rule-item-title">基礎信息</div>
<div class="rule-item-title">
<span>基礎信息</span>
</div>
<div class="rule-item-content">
自簽約生效之日起計算
<div class="cooperation-wrap">
<div class="cooperation-time">合作期限</div>
<div class="cooperation-content">
<div class="time">365天</div>
<span class="cooperation-tips">自簽約生效之日起計算</span>
</div>
</div>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<div class="rule-item-title">公會服務</div>
<div class="rule-item-title"><span>公會服務</span></div>
<div class="rule-item-content">
<div class="content-overflow">
<div class="content-item">
<div class="content-item-title">
<img src="../../image/service.png" alt="">
運營服務
</div>
<div class="content-item-text">
......@@ -73,6 +135,7 @@ const isShow = ref(false);
</div>
<div class="content-item">
<div class="content-item-title">
<img src="../../image/pop.png" alt="">
人氣提升
</div>
<div class="content-item-text">
......@@ -81,6 +144,7 @@ const isShow = ref(false);
</div>
<div class="content-item">
<div class="content-item-title">
<img src="../../image/money.png" alt="">
收益增長
</div>
<div class="content-item-text">
......@@ -89,46 +153,74 @@ const isShow = ref(false);
</div>
</div>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<div class="rule-item-title">合作要求</div>
<div class="rule-item-title"> <span>合作要求</span></div>
<div class="rule-item-content">
<div class="content-overflow">
<div class="require-top-content">
<img src="../../image/leftLine.png" alt="">
<span class="require-content-text">合作期間，我們需要您滿足以下條件</span>
<img src="../../image/rightLine.png" alt=""></img>
</div>
<div class="require-item">
<div class="require-title">開播時長</div>
<div class="require-title">
<div class="dot"></div>
開播時長
</div>
<div class="require-content">試合作期間15天內開播3小時以上超過12天</div>
</div>
<div class="require-item">
<div class="require-title">溝通配合</div>
<div class="require-title">
<div class="dot"></div>溝通配合
</div>
<div class="require-content">試合作期間內每天16:00-23:00需保持與公會的社交媒體對接</div>
</div>
<div class="require-item">
<div class="require-title">提供資料</div>
<div class="require-title">
<div class="dot"></div>提供資料
</div>
<div class="require-content">提供個人資料（生活照、職業、興趣愛好等），公會將幫助您進行形象包裝</div>
</div>
</div>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<div class="rule-item-title">合作條款</div>
<div class="rule-item-title"><span>合作條款</span></div>
<div class="rule-item-content">
<div class="content-overflow">
<div class="require-item">
<div class="require-title">條款一</div>
<div class="require-title">
<div class="dot"></div>條款一
</div>
<div class="require-content">不得對外透露公會合作細節，如果泄露公會合作細節，公會方有權終止合作。並將通過平台申請賬號資產凍結調查</div>
</div>
<div class="require-item">
<div class="require-title">條款二</div>
<div class="require-title">
<div class="dot"></div>條款二
</div>
<div class="require-content">每月開播天數不足要求，公會方有權終止合作。並將通過平台申請賬號資產凍結調查。</div>
</div>
<div class="require-item">
<div class="require-title">條款三</div>
<div class="require-title">
<div class="dot"></div>條款三
</div>
<div class="require-content">長時間不迴應公會的社交媒體對接，公會方有權終止合作。並將通過平台申請賬號資產凍結。</div>
</div>
</div>
</div>
<div class="rule-item-bottom"></div>
</div>
</div>
<!-- 信息填寫 -->
<div class="info">
<div class="info-title">信息填寫</div>
<div class="info-title">
<span>信息填寫</span>
</div>
<div class="info-form">
<van-form @submit="onSubmit">
<van-cell-group inset>
......@@ -152,19 +244,589 @@ const isShow = ref(false);
</div>
</van-form>
</div>
<div class="info-bottom"></div>
</div>
</div>
<div class="bottom">
<div class="confirm">
<span class="message">我們希望能和您開啟第一階段「試合作」，讓我們與你一起經營直播間。 </span>
<img src="../../image/btn.png" alt="">
<span class="tips">簽約將在24小時內完成審核</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.review-wrap {
.header {}
@font-face {
font-family: 'FZZongYi';
src: url('@/assets/fonts/FZZongYi-M05T.ttf') format('opentype');
font-weight: normal;
font-style: normal;
}
.sign-wrap {
background-image: url(../../image/bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
.content {
padding: 679px 49px 24px 49px;
.stage {
width: 652px;
height: 100%;
.stage-title {
background-image: url(../../image/dialogTop.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
.stage-title-wrap {
background-image: url(../../image/titleBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 430px;
height: 89px;
margin: 0 107px 0 115px;
position: relative;
top: -35px;
span {
position: absolute;
display: block;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-family: 'FZZongYi';
font-weight: 400;
font-size: 44px;
color: #FFFFFF;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
}
}
}
.text-content {
background-image: url(../../image/dialogCenter.png);
background-size: 100%;
min-height: 200px;
.content-overflow {
background-image: url(../../image/contentBg.png);
background-size: 100%;
padding-top: 12px;
.content-wrap {
height: 100%;
padding: 12px 16px 25px 46px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
>div {
display: flex;
}
.content-tip {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFF000;
white-space: nowrap;
}
.content-text {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
}
}
.content-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #FFFFFF;
padding: 0 0 0 46px;
display: flex;
position: relative;
align-items: center;
}
}
.stage-progress {
padding: 0px 46px;
height: 100px;
.progress-bar {
width: 100%;
background-color: #000;
border-radius: 14px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
}
.progress-fill {
height: 19px;
background-color: #49FFC2;
border-radius: 14px;
transition: width 0.3s ease;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(73, 255, 194, 0.3) 0%,
rgba(73, 255, 194, 0.6) 33.33%,
rgba(73, 255, 194, 0.9) 66.66%,
rgba(73, 255, 194, 1) 100%);
border-radius: 14px;
}
}
.progress-markers {
display: flex;
justify-content: space-between;
color: rgba(255, 255, 255, 0.5);
font-size: 26px;
font-family: PingFang SC;
font-weight: bold;
.marker {
position: relative;
padding-top: 2px;
padding-left: 53px;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 18px;
height: 12px;
}
span {
display: block;
padding-top: 10px;
}
.active {
color: #49FFC2;
}
}
}
}
}
.bg-bottom {
background-image: url(../../image/dialogBottom.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 100px;
}
}
.sign {
width: 652px;
height: 100%;
padding-top: 30px;
.sign-title {
background-image: url(../../image/dialogTop.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
min-height: 90px;
.sign-title-wrap {
background-image: url(../../image/titleBgLong.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 529px;
height: 89px;
margin: 0 64px 0 59px;
position: relative;
top: -35px;
span {
white-space: nowrap;
position: absolute;
display: block;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-family: 'FZZongYi';
font-weight: 400;
font-size: 44px;
color: #FFFFFF;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
}
}
}
.sign-center {
background-image: url(../../image/dialogCenter.png);
background-size: 100%;
min-height: 100px;
display: flex;
flex-direction: column;
img {
width: 529px;
height: 51px;
padding: 0px 67px 16px 56px;
}
.text-wrap {
display: flex;
flex-direction: row;
gap: 58px;
padding-left: 23px;
.sign-item {
width: 107px;
height: 25px;
font-family: PingFang SC;
font-weight: 500;
font-size: 26px;
color: #FFFFFF;
opacity: 0.5;
}
.normal {
width: 107px;
height: 25px;
font-family: PingFang SC;
font-weight: bold;
font-size: 26px;
color: #FFFFFF;
}
.active {
width: 107px;
height: 25px;
font-family: PingFang SC;
font-weight: 500;
font-size: 26px;
color: #49FFC2;
}
}
}
.sign-bottom {
background-image: url(../../image/dialogBottom.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 100px;
}
}
.rule {
.rule-item {
padding-top: 30px;
.rule-item-title {
background-image: url(../../image/dialogTop.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
min-height: 90px;
position: relative;
span {
display: block;
padding-top: 15px;
font-family: 'FZZongYi-M05T';
font-weight: 400;
font-size: 34px;
color: #48FEC1;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
padding-right: 8px;
}
&::before {
content: '';
position: absolute;
left: 185px;
top: 23px;
width: 64px;
height: 41px;
background-image: url(../../image/leftArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
right: 193px;
top: 23px;
width: 64px;
height: 41px;
background-image: url(../../image/rightArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
}
.rule-item-content {
background-image: url(../../image/dialogCenter.png);
background-size: 100%;
min-height: 20px;
padding: 21px 25px 0 24px;
.content-overflow {
background-image: url(../../image/contentBg.png);
background-size: 100%;
padding-top: 12px;
padding-bottom: 19px;
}
span {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
display: block;
}
.content-item {
padding: 19px 39px 0 39px;
.content-item-title {
width: 168px;
height: 23px;
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #FFF000;
img {
width: 29px;
height: 26px;
margin-right: 12px;
}
}
.content-item-text {
padding-top: 12px;
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
}
}
.require-top-content {
display: flex;
align-items: center;
.require-content-text {
font-family: PingFang SC;
font-weight: 500;
font-size: 24px;
color: #FFF000;
display: block;
padding: 0 12px;
white-space: nowrap;
}
img {
width: 104px;
height: 8px;
}
}
.require-item {
padding: 22px 0 0 20px;
.require-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #FFFFFF;
display: flex;
position: relative;
align-items: center;
}
.require-content {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
opacity: 0.6;
}
}
.cooperation-wrap {
display: flex;
gap: 219px;
flex-direction: row;
align-items: center;
background-image: url(../../image/contentBg.png);
background-size: 100%;
height: 81px;
.cooperation-time {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #49FFC2;
padding-left: 34px;
}
.cooperation-content {
display: flex;
flex-direction: column;
.time {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #FFFFFF;
}
.cooperation-tips {
font-family: PingFang SC;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
opacity: 0.5;
}
}
}
}
.rule-item-bottom {
background-image: url(../../image/dialogBottom.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 70px;
}
}
}
.info {
padding-top: 30px;
.info-title {
background-image: url(../../image/dialogTop.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
min-height: 90px;
position: relative;
span {
display: block;
padding-top: 15px;
font-family: 'FZZongYi-M05T';
font-weight: 400;
font-size: 34px;
color: #48FEC1;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
padding-right: 8px;
}
&::before {
content: '';
position: absolute;
left: 185px;
top: 23px;
width: 64px;
height: 41px;
background-image: url(../../image/leftArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
right: 193px;
top: 23px;
width: 64px;
height: 41px;
background-image: url(../../image/rightArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
}
.info-form {
background-image: url(../../image/dialogCenter.png);
background-size: 100%;
min-height: 220px;
}
.info-bottom {
background-image: url(../../image/dialogBottom.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 70px;
}
}
.confirm {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 47px;
.message {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
width: 592px;
height: 60px;
}
img {
display: block;
width: 416px;
height: 125px;
padding-top: 25px;
}
.content {}
.tips {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
opacity: 0.5;
padding-top: 16px;
}
}
.bottom {}
.dot {
width: 8px;
height: 8px;
background: #FFFFFF;
border-radius: 50%;
margin-left: 4px;
margin-right: 8px;
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment