Browse Source

表单样式完善

old
wangqing 5 years ago
parent
commit
c9bcda1fe0
  1. 4
      .eslintignore
  2. 4
      .stylelintignore
  3. 17
      src/assets/styles/home.scss
  4. 2
      src/store/modules/user.js
  5. 50
      src/views/form/index.vue
  6. 5
      src/views/home/index.vue

4
.eslintignore

@ -3,6 +3,6 @@ node_modules/
babel.config.js babel.config.js
vue.config.js vue.config.js
.eslintrc.js .eslintrc.js
src/util/sign.js src/utils/sign.js
src/views/form/ src/views/form/
src/view/utils src/utils/

4
.stylelintignore

@ -2,6 +2,6 @@ dist/
node_modules/ node_modules/
src/assets/sprites/ src/assets/sprites/
src/theme/ src/theme/
src/util/sign.js src/utils/sign.js
src/views/form/ src/views/form/
src/view/utils src/utils/

17
src/assets/styles/home.scss

@ -55,8 +55,14 @@ $lighterBlue: #409eff;
height: 100vh; height: 100vh;
} }
.left-scrollbar { .left-scrollbar {
height: calc(100vh - 42px); //height: calc(100vh - 42px);
height: calc(100vh - 142px);
overflow: hidden; overflow: hidden;
margin: 5px;
border-radius: 7px;
//text-align: center;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 100);
} }
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
@ -268,3 +274,12 @@ $lighterBlue: #409eff;
} }
} }
} }
.form-name-title:hover {
text-align: center;
border: 1px dashed #7b7b7b;
}
.form-name-title {
border: 1px dashed transparent;
width: 80%;
line-height: 30px;
}

2
src/store/modules/user.js

@ -32,7 +32,7 @@ const mutations = {
localStorage.setItem('token', data.token) localStorage.setItem('token', data.token)
localStorage.setItem('userInfo', JSON.stringify(data.userInfo)) localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
state.token = data.token state.token = data.token
state.userInfo = data.userInfo state.userInfo = JSON.stringify(data.userInfo)
} }
} }

50
src/views/form/index.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board" >
<!-- <div class="logo-wrapper">--> <!-- <div class="logo-wrapper">-->
<!-- <div class="logo">--> <!-- <div class="logo">-->
<!-- <img :src="logo" alt="logo"> Form Generator--> <!-- <img :src="logo" alt="logo"> Form Generator-->
@ -43,24 +43,35 @@
</div> </div>
<div class="center-board"> <div class="center-board">
<div class="action-bar"> <!-- <div class="action-bar">-->
<el-button icon="el-icon-video-play" type="text" @click="run"> <!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
运行 <!-- 运行-->
</el-button> <!-- </el-button>-->
<el-button icon="el-icon-view" type="text" @click="showJson"> <!-- <el-button icon="el-icon-view" type="text" @click="showJson">-->
查看json <!-- 查看json-->
</el-button> <!-- </el-button>-->
<el-button icon="el-icon-download" type="text" @click="download"> <!-- <el-button icon="el-icon-download" type="text" @click="download">-->
导出vue文件 <!-- 导出vue文件-->
</el-button> <!-- </el-button>-->
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy"> <!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
复制代码 <!-- 复制代码-->
</el-button> <!-- </el-button>-->
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty"> <!-- <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">-->
清空 <!-- 清空-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
<el-scrollbar class="center-scrollbar"> <el-scrollbar class="center-scrollbar">
<el-row type="flex" justify="center" align="middle">
<el-col :span="20" style="text-align: center">
<h4 class="form-name-title"
>问卷名称</h4>
</el-col>
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-col :span="24" style="text-align: center">为了给您提供更好的服务希望您能抽出几分钟时间将您的感受和建议告诉我们我们非常重视每位
用户的宝贵意见期待您的参与现在我们就马上开始吧</el-col>
</el-row>
<el-divider></el-divider>
<el-row class="center-board-row" :gutter="formConf.gutter"> <el-row class="center-board-row" :gutter="formConf.gutter">
<el-form <el-form
:size="formConf.size" :size="formConf.size"
@ -129,6 +140,8 @@ import render from '@/components/render/render'
import FormDrawer from './FormDrawer' import FormDrawer from './FormDrawer'
import JsonDrawer from './JsonDrawer' import JsonDrawer from './JsonDrawer'
import RightPanel from './RightPanel' import RightPanel from './RightPanel'
// import '@/assets/styles/index.scss'
import { import {
inputComponents, selectComponents, layoutComponents, formConf inputComponents, selectComponents, layoutComponents, formConf
} from '@/components/generator/config' } from '@/components/generator/config'
@ -431,4 +444,5 @@ export default {
<style lang='scss' > <style lang='scss' >
@import '@/assets/styles/home'; @import '@/assets/styles/home';
@import '@/assets/styles/index';
</style> </style>

5
src/views/home/index.vue

@ -1,5 +1,5 @@
<template> <template>
<el-container> <el-container style="background-color: rgba(247, 247, 247, 100);">
<el-header height="80px" class="homeHeaderView"> <el-header height="80px" class="homeHeaderView">
<el-row type="flex" align="middle"> <el-row type="flex" align="middle">
<el-col :span="4" :offset="1"> <el-col :span="4" :offset="1">
@ -78,8 +78,7 @@ export default {
return store return store
}, },
getUserInfo() { getUserInfo() {
console.log(this.getStore.getters['user/userInfo']) return JSON.parse(this.getStore.getters['user/userInfo'])
return this.getStore.getters['user/userInfo']
} }
}, },
watch: { watch: {

Loading…
Cancel
Save