xbx #13
80
src/components/NavBottom.vue
Normal file
80
src/components/NavBottom.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="nav-bottom">
|
||||
<div class="nav-container">
|
||||
<div v-for="(item, index) in navArray" :key="index" class="nav-item">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="copyright">Beelink公司版权所有 2019—2022</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NavBottom',
|
||||
setup(){
|
||||
interface Nav{
|
||||
name: string;
|
||||
route: string;
|
||||
}
|
||||
const navArray: Array<Nav> = [
|
||||
{
|
||||
name: "直播管理",
|
||||
route: ""
|
||||
},
|
||||
{
|
||||
name: "视频管理",
|
||||
route: ""
|
||||
},
|
||||
{
|
||||
name: "订阅者管理",
|
||||
route: ""
|
||||
},
|
||||
{
|
||||
name: "个人中心",
|
||||
route: ""
|
||||
}
|
||||
]
|
||||
return {
|
||||
navArray
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.nav-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #404040;
|
||||
.nav-item {
|
||||
padding: 0 14px;
|
||||
position: relative;
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background: #404040;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -38,6 +38,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -54,6 +55,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -79,6 +81,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -137,6 +140,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['北京 GMT +08:00']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -150,6 +154,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['人民币']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -163,6 +168,7 @@
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||||
>
|
||||
<a-select-option v-for="(item, index) in ['英语', '中文']" :key="index" :value="item">
|
||||
{{ item }}
|
||||
@ -173,12 +179,14 @@
|
||||
</div>
|
||||
<div class="submit-btn" @click="submitInfo">保存信息</div>
|
||||
</div>
|
||||
<nav-bottom></nav-bottom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive } from "vue";
|
||||
import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: "Archives",
|
||||
@ -186,6 +194,7 @@ export default defineComponent({
|
||||
UserOutlined,
|
||||
SmileOutlined,
|
||||
PlaySquareOutlined,
|
||||
NavBottom
|
||||
},
|
||||
setup(){
|
||||
interface SpeakItem{
|
||||
@ -216,13 +225,14 @@ export default defineComponent({
|
||||
const formData = reactive(formBasic);
|
||||
/**
|
||||
* 修改用户名
|
||||
* @return { void }
|
||||
*/
|
||||
function updateUserName (): void {
|
||||
console.log('修改');
|
||||
|
||||
}
|
||||
/**
|
||||
* 添加我还会说语言
|
||||
* @return { void }
|
||||
*/
|
||||
function addSpeakLang (): void {
|
||||
formData.speakLang.push({
|
||||
@ -232,6 +242,7 @@ export default defineComponent({
|
||||
}
|
||||
/**
|
||||
* 修改手机号
|
||||
* @return { void }
|
||||
*/
|
||||
function updatePhoneNumber (): void {
|
||||
console.log('修改手机号');
|
||||
@ -239,6 +250,7 @@ export default defineComponent({
|
||||
}
|
||||
/**
|
||||
* 修改密码
|
||||
* @return { void }
|
||||
*/
|
||||
function updateUserPassword(): void {
|
||||
console.log('修改密码');
|
||||
@ -246,11 +258,13 @@ export default defineComponent({
|
||||
}
|
||||
/**
|
||||
* 提交表单
|
||||
* @return { void }
|
||||
*/
|
||||
function submitInfo (): void {
|
||||
console.log('12');
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
formData,
|
||||
updateUserName,
|
||||
@ -266,20 +280,26 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
.archives {
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
background-color: #ffffff;
|
||||
padding: 46px;
|
||||
border-radius: 17px;
|
||||
position: relative;
|
||||
.update-btn {
|
||||
font-size: 11px;
|
||||
color: #08AE98;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.user-info {
|
||||
margin-bottom: 42px;
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 30px;
|
||||
.user-name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@ -322,6 +342,12 @@ export default defineComponent({
|
||||
border: 1px solid #DCDFE0;
|
||||
font-size: 11px;
|
||||
}
|
||||
.ant-select {
|
||||
font-size: 12px;
|
||||
}
|
||||
.select-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.speak-lang {
|
||||
.speak-array {
|
||||
@ -403,6 +429,8 @@ export default defineComponent({
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 23px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
92
src/views/mine/ReleaseWebcast.vue
Normal file
92
src/views/mine/ReleaseWebcast.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<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-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>
|
||||
<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>
|
||||
<a-form-item label="Instant delivery">
|
||||
<a-switch v-model:checked="form.delivery" />
|
||||
</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>
|
||||
<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>
|
||||
<a-form-item label="Activity form">
|
||||
<a-input v-model:value="form.desc" type="textarea" />
|
||||
</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>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'ReleaseWebcast',
|
||||
setup() {
|
||||
function onSubmit(): void {
|
||||
|
||||
}
|
||||
return {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form: {
|
||||
name: '',
|
||||
region: undefined,
|
||||
date1: undefined,
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
},
|
||||
onSubmit
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user