diff --git a/package.json b/package.json
index e4ec599..779f77f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ant-design-vue/use": "^0.0.1-alpha.6",
     "ant-design-vue": "^2.0.0-beta.9",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
diff --git a/src/api/index.ts b/src/api/index.ts
index cd8b1f2..82f4cb2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -18,3 +18,4 @@ export function getinfo(): Promise<AxiosPromise>{
 export function seninfo(data: object): Promise<AxiosPromise>{
     return post("b",data)
 }
+
diff --git a/src/components/login/LoginTab.vue b/src/components/login/LoginTab.vue
new file mode 100644
index 0000000..f82c8c7
--- /dev/null
+++ b/src/components/login/LoginTab.vue
@@ -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>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index b5fde67..7801986 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Login from "../views/login/Login.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -7,8 +8,19 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("../layout/Mine.vue"),
     children: [
       {
-        path:"Archives",
+        path:"archives",
+        name: "Archives",
         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')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // 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: '/login',
+    name: 'Login',
+    component:Login
   },
   {
-    path: '/archives',
-    name: 'Archives',
-    component: () => import('../views/mine/Archives.vue')
+    path: '/sign',
+    name: 'Sign',
+    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')
   },
 ]
 
diff --git a/src/static/images/agree.png b/src/static/images/agree.png
new file mode 100644
index 0000000..6dab149
Binary files /dev/null and b/src/static/images/agree.png differ
diff --git a/src/static/images/delete.png b/src/static/images/delete.png
new file mode 100644
index 0000000..f84334d
Binary files /dev/null and b/src/static/images/delete.png differ
diff --git a/src/static/images/email.png b/src/static/images/email.png
new file mode 100644
index 0000000..ddf119e
Binary files /dev/null and b/src/static/images/email.png differ
diff --git a/src/static/images/facebook.png b/src/static/images/facebook.png
new file mode 100644
index 0000000..042d1c0
Binary files /dev/null and b/src/static/images/facebook.png differ
diff --git a/src/static/images/link.png b/src/static/images/link.png
new file mode 100644
index 0000000..af037a5
Binary files /dev/null and b/src/static/images/link.png differ
diff --git a/src/static/images/loginbg.png b/src/static/images/loginbg.png
new file mode 100644
index 0000000..b66ee9d
Binary files /dev/null and b/src/static/images/loginbg.png differ
diff --git a/src/static/images/logo.png b/src/static/images/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/static/images/logo.png differ
diff --git a/src/static/images/smile.png b/src/static/images/smile.png
new file mode 100644
index 0000000..01e8947
Binary files /dev/null and b/src/static/images/smile.png differ
diff --git a/src/static/images/success.png b/src/static/images/success.png
new file mode 100644
index 0000000..60fa7d8
Binary files /dev/null and b/src/static/images/success.png differ
diff --git a/src/static/images/tel.png b/src/static/images/tel.png
new file mode 100644
index 0000000..37a23c1
Binary files /dev/null and b/src/static/images/tel.png differ
diff --git a/src/static/images/weibo.png b/src/static/images/weibo.png
new file mode 100644
index 0000000..52698b9
Binary files /dev/null and b/src/static/images/weibo.png differ
diff --git a/src/static/images/weixin.png b/src/static/images/weixin.png
new file mode 100644
index 0000000..6622aaf
Binary files /dev/null and b/src/static/images/weixin.png differ
diff --git a/src/static/js/common.ts b/src/static/js/common.ts
new file mode 100644
index 0000000..8f5b035
--- /dev/null
+++ b/src/static/js/common.ts
@@ -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 || '';
+}
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/login/About.vue b/src/views/login/About.vue
new file mode 100644
index 0000000..f4e69ea
--- /dev/null
+++ b/src/views/login/About.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
new file mode 100644
index 0000000..95c88b9
--- /dev/null
+++ b/src/views/login/Login.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/login/Reset.vue b/src/views/login/Reset.vue
new file mode 100644
index 0000000..afe2650
--- /dev/null
+++ b/src/views/login/Reset.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/login/Sign.vue b/src/views/login/Sign.vue
new file mode 100644
index 0000000..f1a8eb7
--- /dev/null
+++ b/src/views/login/Sign.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/mine/Archives.vue b/src/views/mine/Archives.vue
index 86a258b..e3cd19b 100644
--- a/src/views/mine/Archives.vue
+++ b/src/views/mine/Archives.vue
@@ -107,7 +107,7 @@
                     </div>
                     <div class="input-box introduce">
                         <div class="label">自我介绍</div>
-                        <a-textarea v-model:value="formData.introduce" />
+                        <a-textarea v-model:value="formData.introduce" class="introduce-textarea" />
                     </div>
                 </div>
             </div>
@@ -322,7 +322,7 @@ export default defineComponent({
             }
             .main-container {
                 margin-left: 17px;
-                .input-box {
+                ::v-deep .input-box {
                     display: flex;
                     align-items: center;
                     margin-bottom: 28px;
@@ -341,12 +341,16 @@ export default defineComponent({
                         border-radius: 3px;
                         border: 1px solid #DCDFE0;
                         font-size: 11px;
+                        color: #3F3F3F;
                     }
                     .ant-select {
                         font-size: 12px;
+                        color: #3F3F3F;
                     }
-                    .select-down {
-                        font-size: 12px;
+                    .ant-select-dropdown {
+                        .ant-select-dropdown-menu-item {
+                            font-size: 12px;
+                        }
                     }
                 }
                 .speak-lang {
@@ -403,6 +407,11 @@ export default defineComponent({
                     .ant-input {
                         width: 359px;
                     }
+                    .introduce-textarea {
+                        height: 85px;
+                        min-height: 85px;
+                        max-height: 85px;
+                    }
                 }
                 .phone-box {
                     .phone {
diff --git a/src/views/mine/ReleaseVideo.vue b/src/views/mine/ReleaseVideo.vue
new file mode 100644
index 0000000..e339e6c
--- /dev/null
+++ b/src/views/mine/ReleaseVideo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/mine/ReleaseWebcast.vue b/src/views/mine/ReleaseWebcast.vue
index dd0e61c..3113423 100644
--- a/src/views/mine/ReleaseWebcast.vue
+++ b/src/views/mine/ReleaseWebcast.vue
@@ -1,92 +1,289 @@
 <template>
     <div class="webcast">
-        <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item label="Activity name">
-            <a-input v-model:value="form.name" />
+        <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="Activity zone">
-            <a-select v-model:value="form.region" placeholder="please select your zone">
-                <a-select-option value="shanghai">
-                Zone one
-                </a-select-option>
-                <a-select-option value="beijing">
-                Zone two
-                </a-select-option>
-            </a-select>
+            <a-form-item label="直播封面" class="item-cover">
+                <a-upload
+                    list-type="picture"
+                    @change="coverChange"
+                    action="//jsonplaceholder.typicode.com/posts/"
+                >
+                    <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="Activity time">
-            <a-date-picker
-                v-model:value="form.date1"
-                show-time
-                type="date"
-                placeholder="Pick a date"
-                style="width: 100%;"
-            />
+            <a-form-item label="视频介绍" class="video-introduction">
+                <a-upload
+                    list-type="picture"
+                    action="//jsonplaceholder.typicode.com/posts/"
+                >
+                    <div class="upload-image">
+                        <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 label="Instant delivery">
-            <a-switch v-model:checked="form.delivery" />
+            <a-form-item label="开始时间">
+                <a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
             </a-form-item>
-            <a-form-item label="Activity type">
-            <a-checkbox-group v-model:value="form.type">
-                <a-checkbox value="1" name="type">
-                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 label="直播时长" class="duration" v-bind="validateInfos.duration">
+                <a-input size="small" v-model:value="form.duration" placeholder="请输入直播时间" />
+                <span class="unit">分钟</span>
             </a-form-item>
-            <a-form-item label="Resources">
-            <a-radio-group v-model:value="form.resource">
-                <a-radio value="1">
-                Sponsor
-                </a-radio>
-                <a-radio value="2">
-                Venue
-                </a-radio>
-            </a-radio-group>
+            <a-form-item label="直播人数" v-bind="validateInfos.number">
+                <a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
             </a-form-item>
-            <a-form-item label="Activity form">
-            <a-input v-model:value="form.desc" type="textarea" />
+            <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: 14, offset: 4 }">
-            <a-button type="primary" @click="onSubmit">
-                Create
-            </a-button>
-            <a-button style="margin-left: 10px;">
-                Cancel
-            </a-button>
+            <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 } 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({
     name: 'ReleaseWebcast',
+    components: {
+        PlaySquareOutlined,
+        PlusOutlined,
+        NavBottom,
+    },
     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 {
             labelCol: { span: 4 },
             wrapperCol: { span: 14 },
-            form: {
-                name: '',
-                region: undefined,
-                date1: undefined,
-                delivery: false,
-                type: [],
-                resource: '',
-                desc: '',
-            },
-            onSubmit
+            validateInfos,
+            resetFields,
+            viewCover,
+            previewImage,
+            coverChange,
+            form,
+            onSubmit,
         }
     }
 })
 </script>
 <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>
\ No newline at end of file