wangqing
4 years ago
19 changed files with 436 additions and 86 deletions
@ -1,52 +0,0 @@ |
|||
// @mixin 通过 @include 调用使用 |
|||
// % 通过 @extend 调用使用 |
|||
|
|||
// 文字超出隐藏，默认为单行超出隐藏，可设置多行 |
|||
@mixin text-overflow($line: 1, $fixed-width: true) { |
|||
@if ($line==1 and $fixed-width==true) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
@else { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: $line; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中 |
|||
@mixin position-center($type: x) { |
|||
position: absolute; |
|||
@if ($type==x) { |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
@if ($type==y) { |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
@if ($type==xy) { |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
} |
|||
} |
|||
|
|||
// 文字两端对齐 |
|||
%justify-align { |
|||
text-align: justify; |
|||
text-align-last: justify; |
|||
} |
|||
|
|||
// 清除浮动 |
|||
%clearfix { |
|||
zoom: 1; |
|||
&::before, |
|||
&::after { |
|||
content: ''; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
} |
|||
@ -1 +0,0 @@ |
|||
// 全局变量 |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<p> |
|||
{{ value }} |
|||
</p> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DescText', |
|||
props: { |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<div> |
|||
<el-radio-group |
|||
v-if="!multiple" |
|||
v-bind="$attrs" v-on="$listeners" @change="onChange" |
|||
> |
|||
<div v-for="option in options" :key="option.value" class="img-radio-item"> |
|||
<el-image |
|||
class="image" |
|||
:src="option.image" |
|||
fit="scale-down" |
|||
:preview-src-list="[option.image]" |
|||
/> |
|||
<el-radio :label="option.value">{{ option.label }}</el-radio> |
|||
</div> |
|||
</el-radio-group> |
|||
<el-checkbox-group |
|||
v-else |
|||
v-bind="$attrs" v-on="$listeners" |
|||
@change="onChange" |
|||
> |
|||
<div v-for="option in options" :key="option.value" class="img-radio-item"> |
|||
<el-image |
|||
class="image" |
|||
:src="option.image" |
|||
fit="scale-down" |
|||
:preview-src-list="[option.image]" |
|||
/> |
|||
|
|||
<el-checkbox :label="option.value">{{ option.label }}</el-checkbox> |
|||
</div> |
|||
</el-checkbox-group> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ImageSelect', |
|||
props: { |
|||
options: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
}, |
|||
required: true |
|||
}, |
|||
multiple: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
onChange(e) { |
|||
console.log(e) |
|||
this.$emit('change', e) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-radio-button__inner, |
|||
.el-radio-group, |
|||
.el-checkbox-group { |
|||
display: flex !important; |
|||
} |
|||
.img-radio-item { |
|||
display: flex; |
|||
flex-direction: column !important; |
|||
align-content: center !important; |
|||
align-items: center !important; |
|||
border: 1px solid rgba(0, 0, 0, 0.1) !important; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important; |
|||
margin: 3px !important; |
|||
.image { |
|||
width: 100px; |
|||
height: 100px; |
|||
margin: 2px 15px 4px 15px; |
|||
} |
|||
.el-radio { |
|||
margin: 4px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
const ImageSelect = require('./ImageSelect/index').default |
|||
const DescText = require('./DescText/index').default |
|||
export default { |
|||
install: Vue => { |
|||
Vue.component(ImageSelect.name, ImageSelect) |
|||
Vue.component(DescText.name, DescText) |
|||
} |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
export default [ |
|||
{ |
|||
path: '/form1', |
|||
meta: {requireLogin: false}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/newIndex.vue'), |
|||
children: [ |
|||
{ |
|||
path: '', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/editor') |
|||
}, |
|||
{ |
|||
path: 'logic', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/logic') |
|||
}, |
|||
{ |
|||
path: 'statistics', |
|||
meta: {requireLogin: true}, |
|||
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/statistics') |
|||
} |
|||
] |
|||
} |
|||
] |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<div class="form-index-container"> |
|||
<el-card class="header-container"> |
|||
<el-row type="flex" align="middle"> |
|||
<el-col :span="1" :offset="1"> |
|||
<i class="el-icon-back" /> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<img src="@/assets/images/indexLogo.png" class="header-logo" @click="$router.push({path:'/home'})"> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="primary">编辑</el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="success">保存为模板</el-button> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="primary" plain>主题</el-button> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="success" plain>设置</el-button> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="info" plain>逻辑</el-button> |
|||
</el-col> |
|||
<el-col :span="1"> |
|||
<el-button type="warning" plain>统计</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<div class="main-container"> |
|||
<router-view /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'NewIndex', |
|||
components: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form-index-container { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 0; |
|||
} |
|||
.header-container { |
|||
width: 100%; |
|||
height: 60px; |
|||
.el-icon-back { |
|||
font-size: 22px; |
|||
font-weight: 550; |
|||
color: #000; |
|||
} |
|||
.header-logo { |
|||
height: 60px; |
|||
width: 200px; |
|||
} |
|||
} |
|||
.main-container { |
|||
width: 100vw; |
|||
height: calc(100vh - 60px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div class="home-container"> |
|||
<div> |
|||
<div class="banner-container"> |
|||
<el-carousel height="60px"> |
|||
<el-carousel-item v-for="item in 4" :key="item"> |
|||
<img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg"> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
</div> |
|||
<div class="flex-row"> |
|||
<div class="left-container"> |
|||
<div class="userinfo-view"> |
|||
<span class="hi-tips">HI.</span> |
|||
<span class="name text-overflow">15080929435</span> |
|||
<el-avatar class="avatar" size="small" |
|||
src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/avatar.jpg" |
|||
/> |
|||
</div> |
|||
<div class="menu-view"> |
|||
<div class="menu-item"> |
|||
<font-icon class="fas fa-laptop" /> |
|||
<span>工作台</span> |
|||
</div> |
|||
<div class="menu-item"> |
|||
<font-icon class="fas fa-clipboard" /> |
|||
<span>模板中心</span> |
|||
</div> |
|||
<div class="menu-item"> |
|||
<font-icon class="fas fa-user" /> |
|||
<span>个人中心</span> |
|||
</div> |
|||
<div class="menu-item"> |
|||
<font-icon class="fas fa-cog" /> |
|||
<span>系统设置</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-container"> |
|||
<el-button type="primary">新建项目</el-button> |
|||
<el-button>新建项目</el-button> |
|||
<my-project /> |
|||
</div> |
|||
</div> |
|||
<div class="about-container"> |
|||
<font-icon class="fas fa-user" /> |
|||
<span class="desc-text">关于填鸭</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import MyProject from '@/views/project/MyProject' |
|||
|
|||
export default { |
|||
name: 'NewIndex', |
|||
components: { |
|||
MyProject |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.home-container { |
|||
background-color: rgba(247, 247, 247, 90); |
|||
display: flex; |
|||
height: 100%; |
|||
width: 100%; |
|||
flex-direction: column; |
|||
} |
|||
.banner-container { |
|||
height: 98px; |
|||
} |
|||
.left-container { |
|||
min-width: 280px; |
|||
height: 501px; |
|||
line-height: 20px; |
|||
border-radius: 2px; |
|||
margin: 0 89px; |
|||
text-align: center; |
|||
//border: 1px solid rgba(255, 255, 255, 100); |
|||
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
padding-left: 20px; |
|||
} |
|||
.userinfo-view { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
background-color: rgba(255, 255, 255, 100); |
|||
.hi-tips { |
|||
font-size: 21px; |
|||
margin-left: 30px; |
|||
} |
|||
.name { |
|||
width: 100px; |
|||
} |
|||
.avatar { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
.menu-view { |
|||
margin-top: 20px; |
|||
height: 501px; |
|||
background-color: rgba(255, 255, 255, 100); |
|||
padding: 20px; |
|||
.menu-item { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 20px; |
|||
text-align: left; |
|||
line-height: 40px; |
|||
.fas { |
|||
color: #1c7bf9; |
|||
margin: 5px; |
|||
} |
|||
span { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
.project-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
.project-item { |
|||
display: flex; |
|||
} |
|||
} |
|||
.about-container { |
|||
position: fixed; |
|||
width: 100%; |
|||
bottom: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 40px; |
|||
.fa-user { |
|||
font-size: 19px; |
|||
color: rgba(172, 172, 172, 100); |
|||
margin: 1px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue