Skip to content

kaisa / SopWeb

Go to a project
Commit b891491c by kaisa
Options

Merge branch 'test'

parents f93f9d42 3048b056
Inline Side-by-side
Showing with 1238 additions and 184 deletions
package-lock.json
......@@ -11,6 +11,7 @@
"@vant/use": "^1.6.0",
"@vueuse/core": "^10.11.1",
"axios": "^1.7.7",
"crypto-js": "^4.2.0",
"echarts": "^5.5.1",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
......@@ -2349,6 +2350,12 @@
"typescript": ">=5"
}
},
"node_modules/crypto-js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
"license": "MIT"
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
......
package.json
......@@ -12,6 +12,7 @@
"@vant/use": "^1.6.0",
"@vueuse/core": "^10.11.1",
"axios": "^1.7.7",
"crypto-js": "^4.2.0",
"echarts": "^5.5.1",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
......
src/api/activity/recruitmentApi.ts
import request from "@/utils/request";
import request from "@/utils/requestAct";
import type { ReturnReq } from "../types";
import { handleQueryParams } from '@/utils/common'
const queryParams = handleQueryParams()
......@@ -10,14 +10,37 @@ if (queryParams.lang == '0' || queryParams.lang == '2') {
lang = 1
}
// 获取用户信息
export const getUser = (data: { target: number }): Promise<ReturnReq> => {
// 获取主播签约页面
export const getSignView = (params: {
type: Number,
}): Promise<ReturnReq> => {
return request({
method: "post",
url: "/data/getUser",
data: {
method: "get",
url: "/webSopAnchor/getSignView",
params: {
lang,
target: data.target
type: params.type
}
});
}
//主播进行签约
export const anchorSign = (params: {
platform: string,
micName: string,
idCard: string,
signuid: string
}): Promise<ReturnReq> => {
return request({
method: "get",
url: "/webSopAnchor/sign",
params: {
lang,
platform: params.platform,
micName: params.micName,
idCard: params.idCard,
signuid: params.signuid
}
});
}
src/assets/fonts/fonts.css
/* 极速狂飙距离字体 */
/* 字体 */
@font-face {
font-family: 'leading-title';
src: url('./TT0663M_.TTF');
font-weight: normal;
font-style: normal;
font-family: 'FZZ';
src: url('./FZZongYi-M05T.ttf') format('truetype');
}
src/router/index.ts
......@@ -11,7 +11,7 @@ export const constantRoutes: RouteRecordRaw[] = [
path: "/activity/recruitment",
name: "recruitment",
component: () => import("@/views/activity/recruitment/index.vue"),
meta: { title: "主播招募" },
meta: { title: "SOP主播招募" },
}
];
......
src/utils/request.ts deleted 100644 → 0
// src/utils/request.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { showToast } from 'vant';
import { getQueryParams } from "./common";
// 创建 axios 实例
const service = axios.create({
// baseURL: import.meta.env.VITE_APP_BASE_API,
baseURL: import.meta.env.VITE_APP_API_URL,
timeout: 30000,
/* "application/json;charset=utf-8" */
headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
});
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// console.log("配置", config)
// get请求映射params参数
const queryParams = getQueryParams();
const requestParams = {
token: queryParams.token,
uid: queryParams.uid,
lang: queryParams?.lang || 2,
cid: queryParams?.cid || "web_gw",
os: "WEB",
};
console.log(config);
if (config.params) {
let url = config.url + "?";
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof value !== "undefined") {
if (typeof value === "object") {
for (const key of Object.keys(value)) {
let params = propName + "[" + key + "]";
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = { ...config.params, ...requestParams };
config.url = url;
} else if(config.data) {
config.data = { ...config.data, ...requestParams };
} else {
config.params = requestParams;
}
// console.log("config.url==========", config.url)
return config;
},
(error: any) => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
// console.log("response", response)
// 检查配置的响应类型是否为二进制类型（'blob' 或 'arraybuffer'）, 如果是，直接返回响应对象
if (
response.config.responseType === "blob" ||
response.config.responseType === "arraybuffer"
) {
return response;
}
// console.log("response", response.data.code);
const { code, msg } = response.data;
return response.data;
// if (code === 1) {
// return response.data;
// }
// showToast (msg || "請求失敗，請稍後重試");
// return Promise.reject(new Error(response.data));
},
(error: any) => {
console.log("error", error);
if (error.response && error.response.data) {
const { code, msg } = error.response.data;
showToast (msg || "請求失敗，請稍後重試");
}
return Promise.reject(error.message);
}
);
// 导出 axios 实例
export default service;
src/utils/requestAct.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { showToast } from 'vant';
import { handleQueryParams } from "./common";
import CryptoJS from 'crypto-js';
// 创建 axios 实例
const service = axios.create({
baseURL: import.meta.env.VITE_APP_ACTIVE_URL,
baseURL: import.meta.env.VITE_APP_API_URL,
timeout: 30000,
headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
});
console.log(import.meta.env.VITE_APP_ACTIVE_URL,'import.meta.env.VITE_APP_ACTIVE_URL+');
// 获取地址栏参数对象
function handleEncryptionQueryParams() {
const search = window.location.search;
// 移除开头的问号
const encryptedParam = search.substring(1);
if (encryptedParam) {
try {
const decryptedStr = decryptAES(encryptedParam, 'mySecretKey01117');
const params = new URLSearchParams(decryptedStr);
return {
uid: params.get('uid'),
};
} catch (error) {
console.error('解密失败:', error);
return null;
}
}
return null;
}
// AES解密函数
function decryptAES(encryptedStr: string, key: string) {
const keyHex = CryptoJS.enc.Utf8.parse(key);
const decrypted = CryptoJS.AES.decrypt(encryptedStr, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 配置统一请求必传参数
const queryParams = handleQueryParams();
const queryParams = handleEncryptionQueryParams();
const newParams = {
token: queryParams?.token || "debug",
uid: queryParams?.uid || 123456,
micId: queryParams?.uid || 123456,
lang: queryParams?.lang || 2,
cid: queryParams?.cid || "web_gw",
vest: queryParams?.vest || 0,
......@@ -43,10 +74,12 @@ service.interceptors.request.use(
service.interceptors.response.use(
(response: AxiosResponse) => {
const { code, msg } = response.data
console.log(response.data,'response.data?');
if (code === 1) {
return response.data;
} else {
showToast(msg || "請求失敗，請稍後重試");
// showToast(msg || "請求失敗，請稍後重試");
return response.data;
}
},
......
src/utils/requestGame.ts deleted 100644 → 0
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { showToast } from 'vant';
import { handleQueryParams } from "./common";
// 创建 axios 实例\
const service = axios.create({
baseURL: import.meta.env.VITE_APP_GAME_API_URL,
timeout: 30000,
headers: { "Content-Type": "application/json;charset=utf-8" },
});
// 请求拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 配置统一请求必传参数
const queryParams = handleQueryParams();
const newParams = {
token: queryParams?.token || "debug",
uid: queryParams?.uid || 123456,
roomId: queryParams?.roomId || "",
lang: queryParams?.lang || 2,
cid: queryParams?.cid || "web_gw",
vest: queryParams?.vest || 0,
os: "WEB",
pkg: queryParams?.pkg || "",
appname: queryParams?.appname || "",
version: queryParams?.appversion || "",
};
if (config.method == 'post') {
config.headers["Content-Type"] = "application/x-www-form-urlencoded; charset=UTF-8";
config.data = { ...newParams, ...config.data };
} else {
config.params = { ...newParams, ...config.params };
}
return config;
},
(error: any) => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
const { code, msg } = response.data
if (code === 1) {
return response.data;
} else {
showToast(msg || "請求失敗，請稍後重試");
return response.data;
}
},
(error: any) => {
console.log("error", error);
if (error.response && error.response.data) {
const { code, msg } = error.response.data;
showToast(msg || "請求失敗，請稍後重試");
}
return Promise.reject(error.message);
}
);
// 导出 axios 实例
export default service;
src/views/activity/recruitment/components/review/index.vue 0 → 100644
<script setup lang="ts">
const isSuccess = ref(false)
const isFail = ref(false)
const isJudge = ref(false)
interface Props {
resultLevel: number;
}
const props = withDefaults(defineProps<Props>(), {
resultLevel: 0
});
// 监听签约状态
watch(() => props.resultLevel, (newVal) => {
// 签约状态 -1 签约驳回 0 审核中 1 签约成功
if (newVal === -1) {
isFail.value = true
} else if (newVal === 0) {
isJudge.value = true
} else if (newVal === 1) {
isSuccess.value = true
}
}, { deep: true, immediate: true });
</script>
<template>
<div class="review-wrap">
<!-- 成功 -->
<div class="success" v-show="isSuccess">
<img src="../../image/success.png" alt="">
<span class="result">簽約成功</span>
<span class="content">愿你在全新的舞台上光芒四射， 直播事业一路长红！</span>
</div>
<!-- 審核中 -->
<div class="judge" v-show="isJudge">
<img src="../../image/judge.png" alt="">
<span class="result">審核中</span>
<span class="content">您的签约資料正在审核中， 请耐心等待。 </span>
</div>
<!-- 駁回 -->
<div class="failure" v-show="isFail">
<img src="../../image/fail.png" alt="">
<span class="result">簽約駁回</span>
<span class="content">您的签约申请暂未通过审核， 請聯繫公會人員了解情況。</span>
</div>
</div>
</template>
<style scoped lang="scss">
.review-wrap {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.success {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 400px;
height: 329px;
}
}
.judge {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 400px;
height: 329px;
}
}
.failure {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 400px;
height: 329px;
}
.result {
color: #F64848;
}
}
.result {
font-family: PingFang SC;
font-weight: bold;
font-size: 52px;
color: #111;
padding: 40px 0 34px 0;
}
.content {
width: 400px;
height: 68px;
font-family: PingFang SC;
font-weight: 500;
font-size: 28px;
color: #444444;
line-height: 42px;
text-align: center;
}
}
</style>
\ No newline at end of file
src/views/activity/recruitment/components/sign/index.vue 0 → 100644
<script setup lang="ts">
import {
anchorSign
} from "@/api/activity/recruitmentApi";
interface Props {
signLevel: number;
platformList: any[];
}
const props = withDefaults(defineProps<Props>(), {
signLevel: 0,
platformList: []
});
/* 主播信息表單 */
const formData = ref({
platform: '',
idNum: '',
userName: '',
uid: ''
})
const formRef = ref();
const isShowWriteId = ref(false)
const showPlatformPicker = ref(false);
const pickerValue = ref([])
const selectPlatform = ref('FIREFLY ID')
interface ColumnItem {
text: string;
value: string;
nickName: string;
}
const columns = ref<ColumnItem[]>([])
// 进度条
const stages = [
{ label: '試合作', time: "15天" },
{ label: '中期合作', time: "180天或收穫200w螢火" },
{ label: '長期合作', time: "365天" }
];
const stageIndex = ref(0)
// 监听合作状态 0 试合作 1 中期合作 2 长期合作
watch(() => props.signLevel, (newVal) => {
stageIndex.value = newVal;
}, { deep: true });
// 监听合作平台数据
watch(() => props.platformList, (newVal) => {
newVal.map(item => {
columns.value.push({ text: item.platform, value: item.context, nickName: item.value })
})
}, { deep: true });
const onConfirm = ({ selectedValues }: any) => {
const selectedItem = columns.value.find(item => item.value === selectedValues);
if (selectedItem) {
selectPlatform.value = selectedItem.nickName;
}
formData.value.platform = selectedValues;
showPlatformPicker.value = false;
isShowWriteId.value = true;
};
const onSubmit = async () => {
try {
await formRef.value.validate();
const { code, msg, data } = await anchorSign({
platform: formData.value.platform,
micName: formData.value.userName,
idCard: formData.value.idNum,
signuid: formData.value.uid
});
} catch (error) {
}
};
</script>
<template>
<div class="sign-wrap">
<div class="content">
<!-- 合作階段 -->
<div class="stage">
<div class="stage-title">
<div class="stage-title-wrap">
<span>合作階段</span>
</div>
</div>
<div class="text-content">
<div class="stage-progress">
<div class="progress-bar">
<div class="progress-fill" :style="{ left: `${stageIndex * 33.33}%` }">
</div>
</div>
<div class="progress-markers">
<div class="marker" v-for="(stage, index) in stages" :key="index">
<img v-show="stageIndex === index" src="../../image/down.png" alt="">
<span :class="{ active: stageIndex === index }">{{ 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">
<div class="sign-title">
<div class="sign-title-wrap">
<span>{{ stages[stageIndex].label }}簽約流程</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">
<div class="rule-item">
<div class="rule-item-title">
<span>公會介紹</span>
</div>
<div class="rule-item-content">
<span class="intro">我們的公會立足華人地區（除中國大陸），擁有大量粉絲資源。公會運營多年，培育出大量高收入主播。我們希望能和你在直播運營上開展合作。</span>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<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">{{ stages[stageIndex].time }}</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"><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">
公會將提供直播内容策划、粉丝维护、数据分析，主播个人 IP 打造等服務
</div>
</div>
<div class="content-item">
<div class="content-item-title">
<img src="../../image/pop.png" alt="">
人氣提升
</div>
<div class="content-item-text">
公會將幫助你提升直播间人气，助力粉丝增长
</div>
</div>
<div class="content-item">
<div class="content-item-title">
<img src="../../image/money.png" alt="">
收益增長
</div>
<div class="content-item-text">
公會將幫助你共同經營直播間，帶來更多禮物收益
</div>
</div>
</div>
</div>
<div class="rule-item-bottom"></div>
</div>
<div class="rule-item">
<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 class="dot"></div>
開播時長
</div>
<div class="require-content">試合作期間15天內開播3小時以上超過12天</div>
</div>
<div class="require-item">
<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 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"><span>合作條款</span></div>
<div class="rule-item-content">
<div class="content-overflow">
<div class="require-item">
<div class="require-title">
<div class="dot"></div>條款一
</div>
<div class="require-content">不得對外透露公會合作細節，如果泄露公會合作細節，公會方有權終止合作。並將通過平台申請賬號資產凍結調查</div>
</div>
<div class="require-item">
<div class="require-title">
<div class="dot"></div>條款二
</div>
<div class="require-content">每月開播天數不足要求，公會方有權終止合作。並將通過平台申請賬號資產凍結調查。</div>
</div>
<div class="require-item">
<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">
<span>填寫信息</span>
</div>
<div class="info-form">
<van-config-provider theme="dark">
<van-form ref="formRef">
<van-cell-group inset>
<van-field v-model="formData.platform" name="platform" label="合作平臺：" placeholder="選擇平臺"
is-link @click="showPlatformPicker = true"
:rules="[{ required: true, message: '请選擇平臺' }]" />
<van-field v-show="isShowWriteId" v-model="formData.uid" name="id"
:label="`${selectPlatform}：`" placeholder="請輸入"
:rules="[{ required: true, message: `请輸入${selectPlatform}` }]" />
<span v-show="isShowWriteId" class="platform-tips">主播僅允許選定一個合作平台，多平台合作模式後續開放，敬請期待
</span>
<van-popup v-model:show="showPlatformPicker" destroy-on-close position="bottom">
<van-picker :columns="columns" :model-value="pickerValue" @confirm="onConfirm"
@cancel="showPlatformPicker = false" />
</van-popup>
<van-field v-model="formData.userName" name="userName" label="姓名:" placeholder="請輸入"
:rules="[{ required: true, message: '请輸入姓名' }]" />
<van-field v-model="formData.idNum" name="idNum" label="身份證號碼:" placeholder="請輸入"
:rules="[{ required: true, message: '请輸入身份證號碼' }]" />
</van-cell-group>
</van-form>
</van-config-provider>
</div>
<div class="info-bottom"></div>
</div>
<div class="confirm">
<span class="message">我們希望能和您開啟第一階段「試合作」，讓我們與你一起經營直播間。 </span>
<img src="../../image/btn.png" alt="" @click="onSubmit">
<span class="tips">簽約將在24小時內完成審核</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@font-face {
font-family: 'FZZ';
src: url('FZZongYi-M05T.ttf') format('opentype');
}
.sign-wrap {
background-image: url(../../image/bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
.content {
padding: 859px 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;
display: flex;
justify-content: center;
align-items: center;
span {
position: absolute;
top: 8px;
transform: skewX(-15deg); // 只保留倾斜效果
font-family: "FZZ";
font-weight: bold;
font-size: 44px;
color: #FFFFFF;
text-shadow: 0px 4px 7px #2170D3;
}
}
}
.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;
width: 33.33%;
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;
gap: 55px;
color: rgba(255, 255, 255, 0.5);
font-size: 26px;
font-family: PingFang SC;
font-weight: bold;
.marker {
position: relative;
padding-left: 40px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 56px;
justify-content: center;
img {
width: 18px;
height: 12px;
}
span {
display: block;
padding-top: 20px;
}
.active {
color: #49FFC2;
padding-top: 10px;
}
}
.marker:nth-child(1) {
padding-left: 53px;
}
.marker:nth-child(3) {
padding-left: 30px;
}
}
}
}
.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;
display: flex;
justify-content: center;
align-items: center;
span {
position: absolute;
top: 8px;
transform: skewX(-15deg); // 只保留倾斜效果
font-family: "FZZ";
font-weight: bold;
font-size: 44px;
color: #FFFFFF;
text-shadow: 0px 4px 7px #2170D3;
}
}
}
.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: 'FZZ';
font-weight: bold;
font-size: 34px;
color: #48FEC1;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
padding-right: 8px;
padding-top: 23px;
}
&::before {
content: '';
position: absolute;
left: 185px;
top: 32px;
width: 64px;
height: 41px;
background-image: url(../../image/leftArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
right: 193px;
top: 32px;
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;
}
.intro {
display: block;
padding: 0 0 0 24px;
}
.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: 14px;
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: 14px 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;
padding-top: 12px;
}
}
.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: 'FZZ';
font-weight: bold;
font-size: 34px;
color: #48FEC1;
text-shadow: 0px 4px 7px #2170D3;
font-style: italic;
padding-right: 8px;
padding-top: 23px;
}
&::before {
content: '';
position: absolute;
left: 185px;
top: 32px;
width: 64px;
height: 41px;
background-image: url(../../image/leftArrow.png);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
right: 193px;
top: 32px;
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;
.platform-tips {
display: block;
font-family: PingFang SC;
font-weight: 400;
font-size: 18px;
color: #FFF000;
padding-top: 5px;
}
}
.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;
text-align: center;
}
img {
display: block;
width: 416px;
height: 125px;
padding-top: 25px;
}
.tips {
font-family: PingFang SC;
font-weight: 500;
font-size: 22px;
color: #FFFFFF;
opacity: 0.5;
padding-top: 16px;
}
}
.dot {
width: 8px;
height: 8px;
background: #FFFFFF;
border-radius: 50%;
margin-left: 4px;
margin-right: 8px;
}
}
}
:deep(.van-form) {
width: 601px;
background: rgba(0, 0, 0, 0.2);
margin-left: 24px;
.van-cell-group {
background: transparent;
.van-cell {
background: transparent;
height: 100px;
align-items: center;
padding-left: 0;
.van-cell__title {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #FFFFFF;
}
.van-cell__value {
width: 302px;
height: 55px;
background: #98BDFE;
border-radius: 6px;
.van-field__body {
height: 100%;
}
}
.van-field__control {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #01173C;
padding-left: 10px;
}
.van-field__control::-webkit-input-placeholder {
font-family: PingFang SC;
font-weight: bold;
font-size: 24px;
color: #00225B;
opacity: 0.42;
}
.van-field__error-message {
font-size: 18px;
padding-top: 2px;
}
.van-cell__right-icon {
color: #00225B;
position: absolute;
right: 20px;
}
}
.van-cell::after {
display: none;
}
.van-cell--clickable {
.van-field__label {
width: 240px;
}
}
}
}
:deep(.van-picker) {
.van-picker__toolbar {
height: 80px;
background-color: #131315;
}
.van-picker__cancel,
.van-picker__confirm {
font-size: 26px;
padding-top: 10px;
font-weight: bold;
}
.van-picker__confirm {
color: #fff;
}
.van-ellipsis {
font-size: 32px;
}
}
</style>
\ No newline at end of file
src/views/activity/recruitment/index.vue
<script setup lang="ts">
import review from './components/review/index.vue'
import sign from './components/sign/index.vue'
import {
getSignView,
} from "@/api/activity/recruitmentApi";
const isShowReview = ref<boolean | null>(null)
const signLevel = ref(0)
const resultLevel = ref(0)
const platformList = ref([])
// 获取页面信息
const getAnchorSignView = async () => {
const { code, msg, data } = await getSignView({
type: 0
});
// 签约状态 0 需要签约页面 1 签约结果页面
if (data.signInfo == 1) {
isShowReview.value = true
} else {
isShowReview.value = false
}
// 合作状态
signLevel.value = data.levelInfo;
// 签约状态
resultLevel.value = data.resultInfo;
// 签约平台
platformList.value = data.list;
};
onMounted(() => {
getAnchorSignView()
})
</script>
<template>
<div>
SOP主播招募
</div>
<sign v-if="isShowReview === false" :signLevel="signLevel" :platformList="platformList" />
<review v-else-if="isShowReview === true" :resultLevel="resultLevel" />
</template>
<style scoped lang="scss"></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