fe / yoho-activity-platform · Commits

Go to a project

Authored by 李奇
Commit 73ca59e527ea1b02c3f2e14a2eeaad9cb4b7f57f 1 parent e86c00f3

样式布局修改

Inline Side-by-side
Showing 6 changed files with 155 additions and 26 deletions
<!-- page content -->
<div class="right_col" role="main">
<div id="app">
<App></App>
</div>
<div class="vue-app-container">
<App></App>
</div>
<!-- /page content -->
... ...
... ... @@ -20,7 +20,7 @@ const router = new VueRouter({
});
new Vue({
el: '#app',
el: '.vue-app-container',
components: {
App
},
... ...
... ... @@ -220,6 +220,23 @@ body .container.body .right_col {
border-radius: 0;
height: 57px;
}
.nav-md .vue-app-container {
position: absolute;
left: 230px;
top: 68px;
right: 0;
bottom: 0;
}
.nav-sm .vue-app-container {
position: absolute;
left: 70px;
top: 68px;
right: 0;
bottom: 0;
}
@media (max-width: 991px) {
.nav-md .container.body .right_col, .nav-md .container.body .top_nav {
width: 100%;
... ... @@ -235,6 +252,14 @@ body .container.body .right_col {
.right_col {
padding: 10px !important;
}
.nav-md .vue-app-container {
position: absolute;
left: 0;
top: 68px;
right: 0;
bottom: 0;
}
}
@media (max-width: 1200px) {
.x_title h2 {
... ...
<template>
<router-view></router-view>
<div class="vue-app-inner-view">
<router-view></router-view>
</div>
</template>
<script>
... ... @@ -9,5 +11,25 @@
</script>
<style>
.vue-app-container {
overflow: auto;
}
.nav_menu {
margin-bottom: 0;
}
.container, .main_container {
height: 100%;
}
footer {
display: none;
bottom: 10px;
right: 10px;
}
.vue-app-inner-view {
padding: 0 10px 60px 10px;
}
</style>
... ...
<template>
<div class="decor">
活动配置
<div>
<button class="btn btn-info">预览</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
<Tabs size="small">
<TabPane label="基础配置">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
<FormItem label="活动规则" required>
<Input type="textarea" :autosize="{minRows: 2,maxRows: 30}"
placeholder="请输入活动规则" :maxlength="2000"></Input>
</FormItem>
<FormItem label="分享链接" required>
<Input type="text"
placeholder="活动分享链接"></Input>
</FormItem>
<FormItem label="提示文案（上）" required>
<Input type="text"
placeholder="提示文案（上）"></Input>
</FormItem>
<FormItem label="提示文案（下）" required>
<Input type="text"
placeholder="提示文案（下）"></Input>
</FormItem>
<FormItem label="跳转链接（左）" required>
<Input type="text"
placeholder="活动底部链接（左）"></Input>
</FormItem>
<FormItem label="跳转链接（右）" required>
<Input type="text"
placeholder="活动底部链接（右）"></Input>
</FormItem>
<FormItem label="活动最大参与次数" required>
<Input type="text"
placeholder="活动最大参与次数"></Input>
</FormItem>
<FormItem label="每天最大抽奖次数" required>
<Input type="text"
placeholder="每天最大抽奖次数"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
<Button type="warning" @click="handleSubmit('formValidate')">预览</Button>
</FormItem>
</Form>
</TabPane>
<TabPane label="奖品配置">标签二的内容</TabPane>
</Tabs>
</template>
<script>
module.exports = {
data() {
return {
actId: 0
};
},
created() {
this.actId = this.$route.query.actId;
export default {
data () {
return {
formValidate: {
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
desc: ''
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
mail: [
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
],
gender: [
{ required: true, message: 'Please select gender', trigger: 'change' }
],
interest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
],
time: [
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
]
}
}
},
methods: {
create() {
this.$router.push({name: 'create'});
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>
<style>
<style lang="scss">
.ivu-form-item {
margin-bottom: 10px;
}
</style>
... ...
<template>
<div class="list">
<Button type="primary" class="create-btn">创建新活动</Button>
<Button type="primary" class="create-btn" @click="toCreate">创建新活动</Button>
<div class="activity-list">
<Table :columns="columns1" :data="data"></Table>
</div>
... ... @@ -95,7 +95,6 @@
</script>
<style lang="scss">
.activity-list {
height: 600px;
}
.create-btn {
... ...