Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into xbx
This commit is contained in:
commit
6626ab779a
GPG Key ID:
A7972FD973317FF3
@ -8,6 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design-vue/use": "^0.0.1-alpha.6",
|
||||||
"ant-design-vue": "^2.0.0-beta.9",
|
"ant-design-vue": "^2.0.0-beta.9",
|
||||||
"axios": "^0.20.0",
|
"axios": "^0.20.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
|||||||
@ -18,3 +18,4 @@ export function getinfo(): Promise<AxiosPromise>{
|
|||||||
export function seninfo(data: object): Promise<AxiosPromise>{
|
export function seninfo(data: object): Promise<AxiosPromise>{
|
||||||
return post("b",data)
|
return post("b",data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
48
src/components/login/LoginTab.vue
Normal file
48
src/components/login/LoginTab.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="logintab">
|
||||||
|
<div :class="selected==1?'tab tab1':'tab'" @click="tabchange(1)">手机号登录</div>
|
||||||
|
<div :class="selected==2?'tab tab1':'tab'" @click="tabchange(2)">账号密码登录</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent , ref} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "LoginTab",
|
||||||
|
components: {},
|
||||||
|
|
||||||
|
|
||||||
|
setup(prop,context) {
|
||||||
|
const selected=ref(1)
|
||||||
|
function tabchange(e: number): void{
|
||||||
|
selected.value=e
|
||||||
|
context.emit("sel",e)
|
||||||
|
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
selected,
|
||||||
|
tabchange
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.logintab{
|
||||||
|
display: flex;
|
||||||
|
.tab{
|
||||||
|
width: 100px;
|
||||||
|
height: 29px;
|
||||||
|
border-radius: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
.tab1{
|
||||||
|
background: #08AE98;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||||
|
import Login from "../views/login/Login.vue"
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
@ -7,8 +8,19 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
component: () => import("../layout/Mine.vue"),
|
component: () => import("../layout/Mine.vue"),
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path:"Archives",
|
path:"archives",
|
||||||
|
name: "Archives",
|
||||||
component: () => import("../views/mine/Archives.vue")
|
component: () => import("../views/mine/Archives.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:"webcast",
|
||||||
|
name: "Webcast",
|
||||||
|
component: () => import("../views/mine/ReleaseWebcast.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:"video",
|
||||||
|
name: "Video",
|
||||||
|
component: () => import("../views/mine/ReleaseVideo.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -33,17 +45,24 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
|
component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/login',
|
||||||
name: 'About',
|
name: 'Login',
|
||||||
// route level code-splitting
|
component:Login
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/archives',
|
path: '/sign',
|
||||||
name: 'Archives',
|
name: 'Sign',
|
||||||
component: () => import('../views/mine/Archives.vue')
|
component: () => import('../views/login/Sign.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/reset',
|
||||||
|
name: 'Reset',
|
||||||
|
component: () => import('../views/login/Reset.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
component: () => import('../views/login/About.vue')
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
BIN
src/static/images/agree.png
Normal file
BIN
src/static/images/agree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
BIN
src/static/images/delete.png
Normal file
BIN
src/static/images/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/images/email.png
Normal file
BIN
src/static/images/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 533 B |
BIN
src/static/images/facebook.png
Normal file
BIN
src/static/images/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/static/images/link.png
Normal file
BIN
src/static/images/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/loginbg.png
Normal file
BIN
src/static/images/loginbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
src/static/images/logo.png
Normal file
BIN
src/static/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/static/images/smile.png
Normal file
BIN
src/static/images/smile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/static/images/success.png
Normal file
BIN
src/static/images/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/static/images/tel.png
Normal file
BIN
src/static/images/tel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
BIN
src/static/images/weibo.png
Normal file
BIN
src/static/images/weibo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/static/images/weixin.png
Normal file
BIN
src/static/images/weixin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
20
src/static/js/common.ts
Normal file
20
src/static/js/common.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* 图片转Base64
|
||||||
|
*/
|
||||||
|
function getBase64(file: File): Promise<string | ArrayBuffer | null> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result);
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 预览图片
|
||||||
|
*/
|
||||||
|
export async function previewCover(file: any): Promise<string> {
|
||||||
|
if (!file.url && !file.preview) {
|
||||||
|
file.preview = await getBase64(file.originFileObj);
|
||||||
|
}
|
||||||
|
return file.url || file.preview || '';
|
||||||
|
}
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
23
src/views/login/About.vue
Normal file
23
src/views/login/About.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "About",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
403
src/views/login/Login.vue
Normal file
403
src/views/login/Login.vue
Normal file
@ -0,0 +1,403 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<div class="box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="title">
|
||||||
|
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||||||
|
</div>
|
||||||
|
<div class="nosign">
|
||||||
|
还没有账号？ <span class="tosign"> 成为一名Beelink老师 </span>
|
||||||
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<LoginTab @sel="Selectnum"></LoginTab>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tabselected == 1">
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<a-form-item label="手机号" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<a-select default-value="Zhejiang" class="getcode">
|
||||||
|
<a-select-option value="Zhejiang">
|
||||||
|
中国+0086
|
||||||
|
</a-select-option>
|
||||||
|
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证码" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<div class="getcode" @click="getcode">
|
||||||
|
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的验证码" />
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<div class="submit">立即登录</div>
|
||||||
|
<div>Beelink公司版权所有 2019—2022</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tabselected == 2">
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<a-form-item label="帐号" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<a-input
|
||||||
|
style="width: 80%"
|
||||||
|
placeholder="请输入您的邮箱或者手机号"
|
||||||
|
/>
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="密码" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<a-input
|
||||||
|
style="width: 70%"
|
||||||
|
placeholder="请输入您的密码"
|
||||||
|
type="password"
|
||||||
|
class="shuru"
|
||||||
|
/>
|
||||||
|
<div class="forget">忘记密码?</div>
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<div class="submit">立即登录</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="top">亿万人的信赖和见证</div>
|
||||||
|
<div class="topdesc">Beelink 开启您的美好学习生活</div>
|
||||||
|
|
||||||
|
<div class="lessons">
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lessonitem">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="lessonname">
|
||||||
|
西班牙语A1级教学
|
||||||
|
<span class="score">7.5分</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icons">
|
||||||
|
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">关于 Beelink</div>
|
||||||
|
<div class="rowline"></div>
|
||||||
|
<div class="texts">
|
||||||
|
Beelink平台拥有数千名优秀老师，丰富的教育经验和有趣的课堂环境，一对一辅导
|
||||||
|
平台的教务管理、线上课堂、线下课堂、助学互动，课程回放等多项教学功能，让
|
||||||
|
您利用碎片时间，轻轻松松学会各种语言。
|
||||||
|
</div>
|
||||||
|
<div class="relation">
|
||||||
|
<div class="more">了解更多</div>
|
||||||
|
<img src="@/static/images/tel.png" alt="" class="icon">
|
||||||
|
<div>136-0111-1111</div>
|
||||||
|
|
||||||
|
<img src="@/static/images/email.png" alt="" class="icon email">
|
||||||
|
<div>136-0111-1111</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
import LoginTab from "@/components/login/LoginTab.vue";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Login",
|
||||||
|
components: {
|
||||||
|
LoginTab,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const formLayout = {
|
||||||
|
labelCol: 4,
|
||||||
|
wrapperCol: 14,
|
||||||
|
};
|
||||||
|
const tabselected = ref(1);
|
||||||
|
const time = ref(60);
|
||||||
|
const Selectnum: (val: number) => void = (val: number) => {
|
||||||
|
console.log("收到子组件事件", val);
|
||||||
|
|
||||||
|
tabselected.value = val;
|
||||||
|
};
|
||||||
|
const getcode: () => void = () => {
|
||||||
|
console.log(11111);
|
||||||
|
const timestep = setInterval(() => {
|
||||||
|
console.log(11112);
|
||||||
|
time.value = time.value - 1;
|
||||||
|
if (time.value > 0) {
|
||||||
|
console.log();
|
||||||
|
} else {
|
||||||
|
time.value = 60;
|
||||||
|
clearInterval(timestep);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
formLayout,
|
||||||
|
tabselected,
|
||||||
|
Selectnum,
|
||||||
|
getcode,
|
||||||
|
time,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login /deep/ .ant-select-selection {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-input {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.ant-input:focus {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid white !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item-label {
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item /deep/ label {
|
||||||
|
color: #0dbba4;
|
||||||
|
font-size: 11px;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
min-width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("../../static/images/loginbg.png");
|
||||||
|
background-size: 100% 130%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-top: 145px;
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.left {
|
||||||
|
width: 314px;
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.orgname {
|
||||||
|
font-size: 29px;
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.nosign {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 17px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.tosign {
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
font-size: 15px;
|
||||||
|
.shuru {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 1px;
|
||||||
|
height: 14px;
|
||||||
|
background: #e5e5e5;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.getcode {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #08ae98;
|
||||||
|
width: 150px;
|
||||||
|
line-height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
width: 143px;
|
||||||
|
height: 35px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#00dac2,
|
||||||
|
#42de9e,
|
||||||
|
#88e062,
|
||||||
|
#d0eb3e,
|
||||||
|
#fffa18
|
||||||
|
);
|
||||||
|
border-radius: 18px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-top: 45px;
|
||||||
|
margin-bottom: 178px;
|
||||||
|
}
|
||||||
|
.forget {
|
||||||
|
color: #08ae98;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 690px;
|
||||||
|
.top {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #08ae98;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.topdesc {
|
||||||
|
color: #343434;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 14px;
|
||||||
|
margin-bottom: 23px;
|
||||||
|
}
|
||||||
|
.lessons {
|
||||||
|
// width: 655px;
|
||||||
|
height: 342px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 140px;
|
||||||
|
.lessonitem {
|
||||||
|
width: 200px;
|
||||||
|
height: 157px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 1px 5px 7px 0px rgba(158, 158, 158, 0.11);
|
||||||
|
border-radius: 18px;
|
||||||
|
margin-right: 23px;
|
||||||
|
margin-bottom: 29px;
|
||||||
|
.pic {
|
||||||
|
width: 200px;
|
||||||
|
height: 112px;
|
||||||
|
background: #98a6b8;
|
||||||
|
border-radius: 18px 18px 0px 0px;
|
||||||
|
}
|
||||||
|
.lessonname {
|
||||||
|
color: #121212;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-indent: 17px;
|
||||||
|
.score {
|
||||||
|
color: #f55456;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
margin-right: 41px;
|
||||||
|
.icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 18px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: 317px;
|
||||||
|
margin-top: 44px;
|
||||||
|
background: #08ae98;
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
.content {
|
||||||
|
width: 415px;
|
||||||
|
// text-align: center;
|
||||||
|
padding-top: 59px;
|
||||||
|
margin-left: 144px;
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.rowline {
|
||||||
|
width: 46px;
|
||||||
|
height: 2px;
|
||||||
|
background: #68df7e;
|
||||||
|
margin-top: 18px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
.texts{
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.relation{
|
||||||
|
height:29px;
|
||||||
|
background: gold;
|
||||||
|
display: flex;
|
||||||
|
line-height: 29px;
|
||||||
|
margin-top: 52px;
|
||||||
|
color: white;
|
||||||
|
.more{
|
||||||
|
width: 86px;
|
||||||
|
height: 29px;
|
||||||
|
background: #68DF7E;
|
||||||
|
color:white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 29px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 9px;
|
||||||
|
height: 12px;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right:6px;
|
||||||
|
margin-left: 29px;
|
||||||
|
}
|
||||||
|
.email{
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
340
src/views/login/Reset.vue
Normal file
340
src/views/login/Reset.vue
Normal file
@ -0,0 +1,340 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<div class="box">
|
||||||
|
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
||||||
|
<div class="title">
|
||||||
|
<span class="orgname">Beelink</span>密码重置
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 1">
|
||||||
|
<div class="nosign">
|
||||||
|
想起密码？
|
||||||
|
<span class="tosign"> 去登录 </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<a-form-item label="账户名" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请输入您的邮箱或者手机号" />
|
||||||
|
</a-form-item>
|
||||||
|
<div class="submit" @click="next(2)">下一步</div>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 2">
|
||||||
|
<div class="nosign">
|
||||||
|
已有账号？
|
||||||
|
<span class="tosign"> 去登录 </span>
|
||||||
|
</div>
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<div class="signform">
|
||||||
|
<a-form-item label="手机号" class="form-item">
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证码" class="form-item">
|
||||||
|
<!-- <a-input-group compact>
|
||||||
|
<div class="getcode" @/click="getcode">
|
||||||
|
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的验证码" />
|
||||||
|
</a-input-group> -->
|
||||||
|
|
||||||
|
<a-input-group compact>
|
||||||
|
<div class="getcode" @click="getcode">
|
||||||
|
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="submit" @click="next(3)">立刻注册</div>
|
||||||
|
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 3">
|
||||||
|
<div class="nosign">您已完成注册</div>
|
||||||
|
<img src="@/static/images/success.png" alt="" class="success">
|
||||||
|
<div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||||||
|
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||||||
|
</div>
|
||||||
|
<div class="stepline"></div>
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||||||
|
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||||||
|
<div class="back" @click="next(1)" v-if="stepnow==2">
|
||||||
|
返回上一步
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stepline"></div>
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||||||
|
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icons" v-if="stepnow == 2">
|
||||||
|
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Sign",
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
const formLayout = {
|
||||||
|
labelCol: 4,
|
||||||
|
wrapperCol: 14,
|
||||||
|
};
|
||||||
|
const time = ref(60);
|
||||||
|
const getcode: () => void = () => {
|
||||||
|
console.log(11111);
|
||||||
|
const timestep = setInterval(() => {
|
||||||
|
console.log(11112);
|
||||||
|
time.value = time.value - 1;
|
||||||
|
if (time.value > 0) {
|
||||||
|
console.log();
|
||||||
|
} else {
|
||||||
|
time.value = 60;
|
||||||
|
clearInterval(timestep);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
const ifagree = ref(true);
|
||||||
|
const agree: () => void = () => {
|
||||||
|
ifagree.value = ifagree.value == true ? false : true;
|
||||||
|
console.log(ifagree.value, 600);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stepnow = ref(1);
|
||||||
|
const next: (e: number) => void = (e: number) => {
|
||||||
|
stepnow.value = e;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
formLayout,
|
||||||
|
getcode,
|
||||||
|
time,
|
||||||
|
agree,
|
||||||
|
ifagree,
|
||||||
|
stepnow,
|
||||||
|
next,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login /deep/ .ant-select-selection {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-input {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.ant-input:focus {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid white !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item-label {
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item /deep/ label {
|
||||||
|
color: #0dbba4;
|
||||||
|
font-size: 11px;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
min-width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("../../static/images/loginbg.png");
|
||||||
|
background-size: 100% 130%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-top: 145px;
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.left1 {
|
||||||
|
width: 710px !important;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 314px;
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.orgname {
|
||||||
|
font-size: 29px;
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.nosign {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 17px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.tosign {
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 1px;
|
||||||
|
height: 14px;
|
||||||
|
background: #e5e5e5;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.getcode {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #08ae98;
|
||||||
|
width: 119px;
|
||||||
|
line-height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.orginfo {
|
||||||
|
margin-top: 178px;
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
width: 143px;
|
||||||
|
height: 35px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#00dac2,
|
||||||
|
#42de9e,
|
||||||
|
#88e062,
|
||||||
|
#d0eb3e,
|
||||||
|
#fffa18
|
||||||
|
);
|
||||||
|
border-radius: 18px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
.agreement {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 23px;
|
||||||
|
cursor: default;
|
||||||
|
.ifagree {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #0ebca4;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right: 7px;
|
||||||
|
.agree {
|
||||||
|
width: 8px;
|
||||||
|
height: 6px;
|
||||||
|
position: relative;
|
||||||
|
top: -4px;
|
||||||
|
left: 2.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right1 {
|
||||||
|
width: 230px !important;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 690px;
|
||||||
|
.steps {
|
||||||
|
padding-top: 112px;
|
||||||
|
.stepline {
|
||||||
|
width: 1px;
|
||||||
|
height: 50px;
|
||||||
|
border: 1px dashed #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
left: 13px;
|
||||||
|
}
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
.back {
|
||||||
|
color: #0dbba4;
|
||||||
|
margin-left: 23px;
|
||||||
|
}
|
||||||
|
.circle {
|
||||||
|
width: 29px;
|
||||||
|
height: 29px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: #eeeeee;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 29px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step1 {
|
||||||
|
background: #08ae98 !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.stepnow {
|
||||||
|
color: #111111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.signform {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.shuru {
|
||||||
|
width: 313px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
margin-right: 41px;
|
||||||
|
margin-top: 227px;
|
||||||
|
.icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 18px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.success{
|
||||||
|
width: 250px;
|
||||||
|
height: 233px;
|
||||||
|
}
|
||||||
|
.ale{
|
||||||
|
color:#08AE98;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-top: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
373
src/views/login/Sign.vue
Normal file
373
src/views/login/Sign.vue
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<div class="box">
|
||||||
|
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
||||||
|
<div class="title">
|
||||||
|
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 1">
|
||||||
|
<div class="nosign">
|
||||||
|
已有账号？
|
||||||
|
<span class="tosign"> 去登录 </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<a-form-item label="手机号" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<a-select
|
||||||
|
default-value="Zhejiang"
|
||||||
|
class="getcode"
|
||||||
|
style="width: 50%"
|
||||||
|
>
|
||||||
|
<a-select-option value="Zhejiang">
|
||||||
|
中国+0086
|
||||||
|
</a-select-option>
|
||||||
|
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证码" class="form-item">
|
||||||
|
<a-input-group compact>
|
||||||
|
<div class="getcode" @click="getcode">
|
||||||
|
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<a-input style="width: 50%" placeholder="请输入您的验证码" />
|
||||||
|
</a-input-group>
|
||||||
|
</a-form-item>
|
||||||
|
<div class="submit" @click="next(2)">下一步</div>
|
||||||
|
<div class="agreement" @click="agree">
|
||||||
|
<div class="ifagree">
|
||||||
|
<img
|
||||||
|
src="@/static/images/agree.png"
|
||||||
|
alt=""
|
||||||
|
class="agree"
|
||||||
|
v-if="ifagree"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
勾选表示同意 《用户注册协议和隐私政策》
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 2">
|
||||||
|
<div class="nosign">
|
||||||
|
已有账号？
|
||||||
|
<span class="tosign"> 去登录 </span>
|
||||||
|
</div>
|
||||||
|
<a-form :layout="formLayout">
|
||||||
|
<div class="signform">
|
||||||
|
<a-form-item label="设置密码" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请输入您的密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="设置密码" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请再次输入您的密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="姓名" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请输入您的姓名" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="邮箱" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请输入您的邮箱" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="母语" class="form-item">
|
||||||
|
<a-input class="shuru" placeholder="请输入您的母语" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="授课语言" class="form-item">
|
||||||
|
<a-select class="getcode" placeholder="请选择您的授课语言">
|
||||||
|
<a-select-option value="Zhejiang">
|
||||||
|
中国+0086
|
||||||
|
</a-select-option>
|
||||||
|
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="submit" @click="next(3)">立刻注册</div>
|
||||||
|
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="stepnow == 3">
|
||||||
|
<div class="nosign">您已完成注册</div>
|
||||||
|
<img src="@/static/images/success.png" alt="" class="success">
|
||||||
|
<div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||||||
|
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||||||
|
</div>
|
||||||
|
<div class="stepline"></div>
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||||||
|
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||||||
|
<div class="back" @click="next(1)" v-if="stepnow==2">
|
||||||
|
返回上一步
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stepline"></div>
|
||||||
|
<div class="step">
|
||||||
|
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||||||
|
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icons" v-if="stepnow == 2">
|
||||||
|
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||||||
|
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Sign",
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
const formLayout = {
|
||||||
|
labelCol: 4,
|
||||||
|
wrapperCol: 14,
|
||||||
|
};
|
||||||
|
const time = ref(60);
|
||||||
|
const getcode: () => void = () => {
|
||||||
|
console.log(11111);
|
||||||
|
const timestep = setInterval(() => {
|
||||||
|
console.log(11112);
|
||||||
|
time.value = time.value - 1;
|
||||||
|
if (time.value > 0) {
|
||||||
|
console.log();
|
||||||
|
} else {
|
||||||
|
time.value = 60;
|
||||||
|
clearInterval(timestep);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
const ifagree = ref(true);
|
||||||
|
const agree: () => void = () => {
|
||||||
|
ifagree.value = ifagree.value == true ? false : true;
|
||||||
|
console.log(ifagree.value, 600);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stepnow = ref(1);
|
||||||
|
const next: (e: number) => void = (e: number) => {
|
||||||
|
stepnow.value = e;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
formLayout,
|
||||||
|
getcode,
|
||||||
|
time,
|
||||||
|
agree,
|
||||||
|
ifagree,
|
||||||
|
stepnow,
|
||||||
|
next,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login /deep/ .ant-select-selection {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-input {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.ant-input:focus {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid white !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item-label {
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
.login /deep/ .ant-form-item /deep/ label {
|
||||||
|
color: #0dbba4;
|
||||||
|
font-size: 11px;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
min-width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("../../static/images/loginbg.png");
|
||||||
|
background-size: 100% 130%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-top: 145px;
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.left1 {
|
||||||
|
width: 710px !important;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 314px;
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.orgname {
|
||||||
|
font-size: 29px;
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.nosign {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 17px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.tosign {
|
||||||
|
color: #0dbba4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 1px;
|
||||||
|
height: 14px;
|
||||||
|
background: #e5e5e5;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.getcode {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #08ae98;
|
||||||
|
width: 313px;
|
||||||
|
line-height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.orginfo {
|
||||||
|
margin-top: 178px;
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
width: 143px;
|
||||||
|
height: 35px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#00dac2,
|
||||||
|
#42de9e,
|
||||||
|
#88e062,
|
||||||
|
#d0eb3e,
|
||||||
|
#fffa18
|
||||||
|
);
|
||||||
|
border-radius: 18px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
.agreement {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 23px;
|
||||||
|
cursor: default;
|
||||||
|
.ifagree {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #0ebca4;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right: 7px;
|
||||||
|
.agree {
|
||||||
|
width: 8px;
|
||||||
|
height: 6px;
|
||||||
|
position: relative;
|
||||||
|
top: -4px;
|
||||||
|
left: 2.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right1 {
|
||||||
|
width: 230px !important;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 690px;
|
||||||
|
.steps {
|
||||||
|
padding-top: 112px;
|
||||||
|
.stepline {
|
||||||
|
width: 1px;
|
||||||
|
height: 50px;
|
||||||
|
border: 1px dashed #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
left: 13px;
|
||||||
|
}
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
.back {
|
||||||
|
color: #0dbba4;
|
||||||
|
margin-left: 23px;
|
||||||
|
}
|
||||||
|
.circle {
|
||||||
|
width: 29px;
|
||||||
|
height: 29px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: #eeeeee;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 29px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step1 {
|
||||||
|
background: #08ae98 !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.stepnow {
|
||||||
|
color: #111111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.signform {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.shuru {
|
||||||
|
width: 313px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
margin-right: 41px;
|
||||||
|
margin-top: 227px;
|
||||||
|
.icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 18px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.success{
|
||||||
|
width: 250px;
|
||||||
|
height: 233px;
|
||||||
|
}
|
||||||
|
.ale{
|
||||||
|
color:#08AE98;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-top: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -107,7 +107,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="input-box introduce">
|
<div class="input-box introduce">
|
||||||
<div class="label">自我介绍</div>
|
<div class="label">自我介绍</div>
|
||||||
<a-textarea v-model:value="formData.introduce" />
|
<a-textarea v-model:value="formData.introduce" class="introduce-textarea" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -322,7 +322,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 17px;
|
margin-left: 17px;
|
||||||
.input-box {
|
::v-deep .input-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
@ -341,14 +341,18 @@ export default defineComponent({
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #DCDFE0;
|
border: 1px solid #DCDFE0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
}
|
}
|
||||||
.ant-select {
|
.ant-select {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: #3F3F3F;
|
||||||
}
|
}
|
||||||
.select-down {
|
.ant-select-dropdown {
|
||||||
|
.ant-select-dropdown-menu-item {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.speak-lang {
|
.speak-lang {
|
||||||
.speak-array {
|
.speak-array {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -403,6 +407,11 @@ export default defineComponent({
|
|||||||
.ant-input {
|
.ant-input {
|
||||||
width: 359px;
|
width: 359px;
|
||||||
}
|
}
|
||||||
|
.introduce-textarea {
|
||||||
|
height: 85px;
|
||||||
|
min-height: 85px;
|
||||||
|
max-height: 85px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.phone-box {
|
.phone-box {
|
||||||
.phone {
|
.phone {
|
||||||
|
|||||||
300
src/views/mine/ReleaseVideo.vue
Normal file
300
src/views/mine/ReleaseVideo.vue
Normal file
@ -0,0 +1,300 @@
|
|||||||
|
<template>
|
||||||
|
<div class="upload-video">
|
||||||
|
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<div class="title">上传视频</div>
|
||||||
|
<a-form-item label="视频标题">
|
||||||
|
<a-input size="small" v-model:value="form.title" placeholder="请输入您的视频标题" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="视频封面" class="video-cover">
|
||||||
|
<a-upload
|
||||||
|
list-type="picture"
|
||||||
|
@change="coverChange"
|
||||||
|
>
|
||||||
|
<div class="upload-image" v-if="!viewCover">
|
||||||
|
<PlusOutlined style="fontSize: 22px;" />
|
||||||
|
</div>
|
||||||
|
<div class="preview-image" v-else>
|
||||||
|
<img style="width: 100%" :src="previewImage" />
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="选择视频" class="video-introduction">
|
||||||
|
<div class="upload-container">
|
||||||
|
<a-upload :beforeUpload="beforeVideoUpload">
|
||||||
|
<div class="upload-image">
|
||||||
|
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
<!-- 文件列表 -->
|
||||||
|
<div v-for="(item, index) in form.video" :key="index" class="video-list">
|
||||||
|
<img src="@/static/images/link.png" class="link" />
|
||||||
|
<span class="one-line-hide">{{ item.name }}</span>
|
||||||
|
<img src="@/static/images/delete.png" @click="removeFile(index)" class="del" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="demand">
|
||||||
|
<p class="one-line-hide">视频要求：</p>
|
||||||
|
<p class="one-line-hide">1.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="视频简介" class="brief">
|
||||||
|
<a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的视频简介" />
|
||||||
|
<span class="words-number">{{ form.brief.length }}/200</span>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||||
|
<a-button @click="onSubmit">上传视频</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
<nav-bottom></nav-bottom>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, Ref, ref } from 'vue';
|
||||||
|
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||||
|
import NavBottom from '@/components/NavBottom.vue';
|
||||||
|
import { previewCover } from '@/static/js/common';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ReleaseWebcast',
|
||||||
|
components: {
|
||||||
|
PlaySquareOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
NavBottom,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
interface FileItem{
|
||||||
|
uid: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
const fileList: Array<FileItem> = [];
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const form = reactive({
|
||||||
|
title: '',
|
||||||
|
cover: '',
|
||||||
|
brief: '',
|
||||||
|
video: fileList,
|
||||||
|
});
|
||||||
|
// 是否显示封面预览 封面的路径
|
||||||
|
const viewCover: Ref<boolean> = ref(false),
|
||||||
|
previewImage: Ref<string> = ref('');
|
||||||
|
/**
|
||||||
|
* 封面改变触发事件
|
||||||
|
*/
|
||||||
|
function coverChange(info: any): void {
|
||||||
|
// console.log(info);
|
||||||
|
// 获取预览图片
|
||||||
|
previewCover(info.file).then(url => previewImage.value = url);
|
||||||
|
viewCover.value = true;
|
||||||
|
// form.cover = fileList;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除视频列表
|
||||||
|
* @param index 删除文件的索引
|
||||||
|
*/
|
||||||
|
function removeFile(index: number): void {
|
||||||
|
const newFileList = form.video.slice();
|
||||||
|
newFileList.splice(index, 1);
|
||||||
|
form.video = newFileList;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 上传封面之前的钩子
|
||||||
|
* @param file 上传的文件
|
||||||
|
*/
|
||||||
|
const beforeCoverUpload = (file: File): boolean => {
|
||||||
|
console.log(file);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除封面
|
||||||
|
*/
|
||||||
|
function cancelCover(file: any): void {
|
||||||
|
console.log(file);
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 上传文件之前的钩子
|
||||||
|
* @param file 上传的文件
|
||||||
|
*/
|
||||||
|
const beforeVideoUpload = (file: any): boolean => {
|
||||||
|
// console.log(file);
|
||||||
|
if(file.type != '') {
|
||||||
|
// handleRemove(file);
|
||||||
|
}
|
||||||
|
form.video = [...fileList, file];
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 表单提交
|
||||||
|
*/
|
||||||
|
const onSubmit = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
labelCol: { span: 4 },
|
||||||
|
wrapperCol: { span: 14 },
|
||||||
|
form,
|
||||||
|
viewCover,
|
||||||
|
previewImage,
|
||||||
|
removeFile,
|
||||||
|
previewCover,
|
||||||
|
coverChange,
|
||||||
|
cancelCover,
|
||||||
|
beforeCoverUpload,
|
||||||
|
beforeVideoUpload,
|
||||||
|
onSubmit,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.upload-video {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 700px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 46px;
|
||||||
|
border-radius: 17px;
|
||||||
|
position: relative;
|
||||||
|
::v-deep .ant-form {
|
||||||
|
.title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111111;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.ant-row {
|
||||||
|
.ant-form-item-label {
|
||||||
|
width: 60px;
|
||||||
|
margin: 0 30px 0 17px;
|
||||||
|
> label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
.ant-input {
|
||||||
|
width: 171px;
|
||||||
|
padding: 6px 11px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
|
&::-webkit-input-placeholder{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-select {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #3F3F3F;
|
||||||
|
}
|
||||||
|
.ant-select-dropdown {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-upload-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-btn {
|
||||||
|
padding: 0;
|
||||||
|
width: 63px;
|
||||||
|
height: 23px;
|
||||||
|
background: #08AE98;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-cover {
|
||||||
|
.preview-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-introduction {
|
||||||
|
.ant-form-item-control-wrapper {
|
||||||
|
.ant-form-item-children {
|
||||||
|
display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
.demand {
|
||||||
|
height: 94px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
width: 134px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
> p {
|
||||||
|
line-height: 17px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.link {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #07AD97;
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
.del {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.duration {
|
||||||
|
.unit {
|
||||||
|
margin-left: 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brief {
|
||||||
|
position: relative;
|
||||||
|
.ant-input {
|
||||||
|
width: 359px;
|
||||||
|
}
|
||||||
|
.brief-textarea {
|
||||||
|
min-height: 85px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.words-number {
|
||||||
|
position: absolute;
|
||||||
|
right: 11px;
|
||||||
|
bottom: -11px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #7F7F7F;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,92 +1,289 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="webcast">
|
<div class="webcast">
|
||||||
<a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
<a-form-item label="Activity name">
|
<div class="title">直播信息</div>
|
||||||
<a-input v-model:value="form.name" />
|
<a-form-item label="直播标题">
|
||||||
|
<a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Activity zone">
|
<a-form-item label="直播封面" class="item-cover">
|
||||||
<a-select v-model:value="form.region" placeholder="please select your zone">
|
<a-upload
|
||||||
<a-select-option value="shanghai">
|
list-type="picture"
|
||||||
Zone one
|
@change="coverChange"
|
||||||
</a-select-option>
|
action="//jsonplaceholder.typicode.com/posts/"
|
||||||
<a-select-option value="beijing">
|
>
|
||||||
Zone two
|
<div class="upload-image" v-if="!viewCover">
|
||||||
</a-select-option>
|
<PlusOutlined style="fontSize: 22px;" />
|
||||||
</a-select>
|
</div>
|
||||||
|
<div class="preview-image" v-else>
|
||||||
|
<img style="width: 100%" :src="previewImage" />
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Activity time">
|
<a-form-item label="视频介绍" class="video-introduction">
|
||||||
<a-date-picker
|
<a-upload
|
||||||
v-model:value="form.date1"
|
list-type="picture"
|
||||||
show-time
|
action="//jsonplaceholder.typicode.com/posts/"
|
||||||
type="date"
|
>
|
||||||
placeholder="Pick a date"
|
<div class="upload-image">
|
||||||
style="width: 100%;"
|
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||||
/>
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
<div class="demand">
|
||||||
|
<p class="one-line-hide">视频要求：</p>
|
||||||
|
<p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
|
||||||
|
<p class="one-line-hide">2.支持文件大小100M</p>
|
||||||
|
<p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
|
||||||
|
</div>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Instant delivery">
|
<a-form-item label="开始时间">
|
||||||
<a-switch v-model:checked="form.delivery" />
|
<a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Activity type">
|
<a-form-item label="直播时长" class="duration" v-bind="validateInfos.duration">
|
||||||
<a-checkbox-group v-model:value="form.type">
|
<a-input size="small" v-model:value="form.duration" placeholder="请输入直播时间" />
|
||||||
<a-checkbox value="1" name="type">
|
<span class="unit">分钟</span>
|
||||||
Online
|
|
||||||
</a-checkbox>
|
|
||||||
<a-checkbox value="2" name="type">
|
|
||||||
Promotion
|
|
||||||
</a-checkbox>
|
|
||||||
<a-checkbox value="3" name="type">
|
|
||||||
Offline
|
|
||||||
</a-checkbox>
|
|
||||||
</a-checkbox-group>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Resources">
|
<a-form-item label="直播人数" v-bind="validateInfos.number">
|
||||||
<a-radio-group v-model:value="form.resource">
|
<a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
|
||||||
<a-radio value="1">
|
|
||||||
Sponsor
|
|
||||||
</a-radio>
|
|
||||||
<a-radio value="2">
|
|
||||||
Venue
|
|
||||||
</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="Activity form">
|
<a-form-item label="直播简介" class="brief">
|
||||||
<a-input v-model:value="form.desc" type="textarea" />
|
<a-textarea v-model:value="form.brief" :autosize="true" class="brief-textarea" maxlength="200" placeholder="请输入您的直播简介" />
|
||||||
|
<span class="words-number">{{ form.brief.length }}/200</span>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
|
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||||
<a-button type="primary" @click="onSubmit">
|
<a-button @click="onSubmit">发布直播</a-button>
|
||||||
Create
|
|
||||||
</a-button>
|
|
||||||
<a-button style="margin-left: 10px;">
|
|
||||||
Cancel
|
|
||||||
</a-button>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
<nav-bottom></nav-bottom>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
|
||||||
|
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useForm } from '@ant-design-vue/use';
|
||||||
|
import NavBottom from '@/components/NavBottom.vue';
|
||||||
|
import { previewCover } from '@/static/js/common';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ReleaseWebcast',
|
name: 'ReleaseWebcast',
|
||||||
|
components: {
|
||||||
|
PlaySquareOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
NavBottom,
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
function onSubmit(): void {
|
// 表单数据
|
||||||
|
const form = reactive({
|
||||||
|
title: '',
|
||||||
|
cover: '',
|
||||||
|
introduction: '',
|
||||||
|
startTime: '',
|
||||||
|
duration: '',
|
||||||
|
number: '',
|
||||||
|
brief: '',
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* 验证直播时间
|
||||||
|
*/
|
||||||
|
async function validateDuration (rule: object, value: number): Promise<string | void> {
|
||||||
|
if (value < 30 || value > 120) {
|
||||||
|
return Promise.reject('*最短30min 最长120min');
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 验证直播人数
|
||||||
|
*/
|
||||||
|
const validateNumber = async (rule: object, value: number): Promise<string | void> => {
|
||||||
|
if (value < 1 || value > 4) {
|
||||||
|
return Promise.reject('**最少1人，最多4人');
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 验证规则
|
||||||
|
const rules = reactive({
|
||||||
|
duration: [
|
||||||
|
{
|
||||||
|
validator: validateDuration,
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
number: [
|
||||||
|
{
|
||||||
|
validator: validateNumber,
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 是否显示封面预览 封面的路径
|
||||||
|
const viewCover: Ref<boolean> = ref(false),
|
||||||
|
previewImage: Ref<string> = ref('');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封面改变触发事件
|
||||||
|
*/
|
||||||
|
function coverChange(info: any): void {
|
||||||
|
// console.log(info);
|
||||||
|
// 获取预览图片
|
||||||
|
previewCover(info.file).then(url => previewImage.value = url);
|
||||||
|
viewCover.value = true;
|
||||||
|
// form.cover = fileList;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||||
|
/**
|
||||||
|
* 表单提交
|
||||||
|
*/
|
||||||
|
const onSubmit = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
validate().then(() => {
|
||||||
|
console.log(toRaw(form));
|
||||||
|
}).catch((err: object) => {
|
||||||
|
console.log('error', err);
|
||||||
|
});
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
labelCol: { span: 4 },
|
labelCol: { span: 4 },
|
||||||
wrapperCol: { span: 14 },
|
wrapperCol: { span: 14 },
|
||||||
form: {
|
validateInfos,
|
||||||
name: '',
|
resetFields,
|
||||||
region: undefined,
|
viewCover,
|
||||||
date1: undefined,
|
previewImage,
|
||||||
delivery: false,
|
coverChange,
|
||||||
type: [],
|
form,
|
||||||
resource: '',
|
onSubmit,
|
||||||
desc: '',
|
|
||||||
},
|
|
||||||
onSubmit
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.webcast {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 700px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 46px;
|
||||||
|
border-radius: 17px;
|
||||||
|
position: relative;
|
||||||
|
::v-deep .ant-form {
|
||||||
|
.title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111111;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.ant-row {
|
||||||
|
.ant-form-item-label {
|
||||||
|
width: 60px;
|
||||||
|
margin: 0 30px 0 17px;
|
||||||
|
> label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
.ant-input {
|
||||||
|
width: 171px;
|
||||||
|
padding: 6px 11px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
|
&::-webkit-input-placeholder{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-select {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-select-dropdown {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-form-explain {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #D22D2E;
|
||||||
|
}
|
||||||
|
.ant-upload-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-btn {
|
||||||
|
padding: 0;
|
||||||
|
width: 63px;
|
||||||
|
height: 23px;
|
||||||
|
background: #08AE98;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-cover {
|
||||||
|
.preview-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-introduction {
|
||||||
|
.ant-form-item-control-wrapper {
|
||||||
|
.ant-form-item-children {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.demand {
|
||||||
|
line-height: 17px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
width: 134px;
|
||||||
|
> p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.duration {
|
||||||
|
.unit {
|
||||||
|
margin-left: 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brief {
|
||||||
|
position: relative;
|
||||||
|
.ant-input {
|
||||||
|
width: 359px;
|
||||||
|
}
|
||||||
|
.brief-textarea {
|
||||||
|
min-height: 85px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.words-number {
|
||||||
|
position: absolute;
|
||||||
|
right: 11px;
|
||||||
|
bottom: -11px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #7F7F7F;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user