Commit 7aeac2e1 authored by looker's avatar looker

add some panel

parent b3caa95d
Pipeline #131 failed with stages
<template>
<div class="tabs-body">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<search-from></search-from>
<div style="margin-top: 10px">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
</div>
</el-col>
</el-row>
</div>
<div style="margin-top: 10px">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557837447103&di=5da71b5a1a7f501f25969ff8348f5649&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F377adab44aed2e7371d6b8698c01a18b87d6fabc.jpg" alt="">
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import searchFrom from './search-from'
export default{
data(){
return {
activeName:'second',
formInline:{},
baseInfo:[
{
label:'微信昵称',
value:'李元霸'
},
{
label:'微信号',
value:'李元霸'
},
{
label:'微信备注',
value:'李元霸'
},
{
label:'来源',
value:'李元霸'
}
]
}
},
components: {
searchFrom
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix{
span{
font-weight: 800;
}
}
.box-card {
width: 100%;
}
.box-body{
padding-left:10px;
div{
font-size:15px;
margin-bottom:10px;
}
}
.grid-content{
img{
width:100%;
}
}
</style>
\ No newline at end of file
<template>
<div class="from-body">
<el-form :inline="true" :model="formInline" label-width="80" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-input v-model="formInline.user" placeholder="输入检索服务项"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-input v-model="formInline.user" placeholder="输入检索颜色"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-input v-model="formInline.user" placeholder="输入检索品牌"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-select v-model="formInline.region" placeholder="分类">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-select v-model="formInline.region" placeholder="部位">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-select v-model="formInline.region" placeholder="材质">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-select v-model="formInline.region" placeholder="症状">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item>
<el-input v-model="formInline.user" placeholder="订单号"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
formInline:{},
baseInfo:[
{
label:'微信昵称',
value:'李元霸'
},
{
label:'微信号',
value:'李元霸'
},
{
label:'微信备注',
value:'李元霸'
},
{
label:'来源',
value:'李元霸'
}
]
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.from-body
width:100%;
.tool-body
width:100%;
height:729px;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix{
span{
font-weight: 800;
}
}
.box-card {
width: 100%;
}
.box-body{
padding-left:10px;
div{
font-size:15px;
margin-bottom:10px;
}
}
</style>
\ No newline at end of file
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>顾客信息</span>
</div>
<div>
<div class="box-body">
<div>
<span>顾客ID:</span>
<span>107507</span>
<el-button type="success" size="mini">修改</el-button>
</div>
<div>
<span>系统顾客名称:</span>
<span>毛毛 13434343434</span>
<el-button type="success" size="mini">新建预约单</el-button>
</div>
<div>
<span>来源:</span>
<span> 清仓自增长</span>
</div>
<div>
<span>余额:</span>
<span>25.0</span>
<el-button type="info" size="mini">发送充值链接</el-button>
</div>
<div>
<span>6天内预约单数据:</span>
<span>2</span>
</div>
<div>
<span>6天前预约单数据:</span>
<span> 2</span>
</div>
<div>
<span>历史订单:</span>
<span>2</span>
</div>
<div>
<span>返工:</span>
<span>2</span>
</div>
</div>
</div>
</el-card>
</template>
<script>
export default{
data(){
return {
activeName:'second',
baseInfo:[
{
label:'微信昵称',
value:'李元霸'
},
{
label:'微信号',
value:'李元霸'
},
{
label:'微信备注',
value:'李元霸'
},
{
label:'来源',
value:'李元霸'
}
]
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix{
span{
font-weight: 800;
}
}
.box-card {
width: 100%;
}
.box-body{
padding-left:10px;
div{
font-size:15px;
margin-bottom:10px;
span{
margin-right:10px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<div class="box-body">
<div v-for="item in baseInfo">
<span>{{item.label}}</span>
<span>{{item.value}}</span>
</div>
</div>
</el-card>
<cus-info></cus-info>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>售前咨询</span>
</div>
<div>
<el-button>新粉咨询</el-button>
<el-button type="success">日常咨询</el-button>
</div>
</el-card>
</div>
</template>
<script>
import cusInfo from './cus-info'
export default{
data(){
return {
activeName:'second',
baseInfo:[
{
label:'微信昵称',
value:'李元霸'
},
{
label:'微信号',
value:'李元霸'
},
{
label:'微信备注',
value:'李元霸'
},
{
label:'来源',
value:'李元霸'
}
]
}
},
components: {
cusInfo
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix{
span{
font-weight: 800;
}
}
.box-card {
width: 100%;
}
.box-body{
padding-left:10px;
div{
font-size:15px;
margin-bottom:10px;
}
}
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-collapse v-model="activeName">
<el-collapse-item v-for="(item, index) in queryLists" :title="item.title" :name="index">
<div class="query-box" v-for="(ite) in item.numItem">
<span>{{ite.label}}:</span>
<span v-if="index!=0" style="color: #007dfd">{{ite.value}}</span>
<span v-if="index==0">{{ite.value}}</span>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
queryLists:[
{
title:'个人统计',
numItem:[
{
label:'今日接入量',
value:54
},
{
label:'今日预约量',
value:54
},
{
label:'今日开单量',
value:54
},
{
label:'本月开单量',
value:54
},
{
label:'6日内预约单未转正',
value:54
},
{
label:'6日外预约单未转正',
value:54
}
]
},
{
title:'个人待办事项',
numItem:[
{
label:'诊断方案未发送',
value:54
},
{
label:'诊断方案未确认',
value:54
},
{
label:'效果方案未发送',
value:54
},
{
label:'效果方案未确认',
value:54
}
]
},
{
title:'组内待办事项',
numItem:[
{
label:'诊断方案未发送',
value:54
},
{
label:'诊断方案未确认',
value:54
},
{
label:'效果方案未发送',
value:54
},
{
label:'效果方案未确认',
value:54
}
]
}
]
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.el-collapse-item__header{
font-size:20px!important;
}
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
.query-box{
margin-left:20px;
span{
font-size:15px;
margin-right:10px;
}
}
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/><img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
<img width="95px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4239577881,3334823103&fm=200&gp=0.jpg" alt=""/>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="顾客" name="first">
<div class="tool-body">
<cuss-service></cuss-service>
</div>
</el-tab-pane>
<el-tab-pane label="看板" name="second">
<div class="tool-body">
<cus-users></cus-users>
</div>
</el-tab-pane>
<el-tab-pane label="话术" name="third">
<div class="tool-body">
<takel-script></takel-script>
</div>
</el-tab-pane>
<el-tab-pane label="表情包" name="fourth">
<div class="tool-body">
<doutu-picture></doutu-picture>
</div>
</el-tab-pane>
<el-tab-pane label="对比图" name="fivth">
<div class="tool-body">
<compre-picture></compre-picture>
</div>
</el-tab-pane>
<el-tab-pane label="其他" name="sixth"><div class="tool-body">用户管理</div></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import cussService from './cus-service'
import cusUsers from './cus-users'
import takelScript from './takel-script'
import doutuPicture from './doutu-picture'
import comparisonMap from './comparison-map'
import comprePicture from './compre-picture'
import labelUserList from './label-userList'
export default{
data(){
return {
activeName:'second',
}
},
components: {
cussService,
cusUsers,
takelScript,
doutuPicture,
comparisonMap,
comprePicture,
labelUserList
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
overflow-y: auto;
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="客服" name="first"><div class="tool-body">用户管理</div></el-tab-pane>
<el-tab-pane label="顾客" name="second"><div class="tool-body">用户管理</div></el-tab-pane>
<el-tab-pane label="话术" name="third"><div class="tool-body">用户管理</div></el-tab-pane>
<el-tab-pane label="图片" name="fourth"><div class="tool-body">用户管理</div></el-tab-pane>
<el-tab-pane label="对比图" name="fivth"><div class="tool-body">用户管理</div></el-tab-pane>
<el-tab-pane label="其他" name="sixth"><div class="tool-body">用户管理</div></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-input v-model="input" placeholder="请输入内容">
</el-input>
<i class="el-icon-search" style="position:relative;top: -30px;right: -380px;"></i>
<div class="huashu-type">
<el-button v-for="item in buttons">{{item}}</el-button>
</div>
<div>
<el-card class="box-card">
央视网消息:眼下,东北正在大面积地春播。记者从农业农村部了解到,今年我国东北四省区及黄淮海地区,大豆种植面积大幅增加。
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
</div>
<div>
央视网消息:眼下,东北正在大面积地春播。记者从农业农村部了解到,今年我国东北四省区及黄淮海地区,大豆种植面积大幅增加。
</div>
</el-card>
</div>
</div>
</template>
<script>
export default{
data(){
return {
activeName:'second',
input:'gregreg',
buttons:[
'全部',
'回访调查'
]
}
},
components: {
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.clearfix{
span{
font-weight: 800;
}
}
.box-card{
margin-top:20px;
}
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
</style>
\ No newline at end of file
<template>
<div class="tabs-body">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="顾客" name="first">
<div class="tool-body">
<cuss-service></cuss-service>
</div>
</el-tab-pane>
<el-tab-pane label="看板" name="second">
<div class="tool-body">
<cus-users></cus-users>
</div>
</el-tab-pane>
<el-tab-pane label="话术" name="third">
<div class="tool-body">
<takel-script></takel-script>
</div>
</el-tab-pane>
<el-tab-pane label="表情包" name="fourth">
<div class="tool-body">
<doutu-picture></doutu-picture>
</div>
</el-tab-pane>
<el-tab-pane label="对比图" name="fivth">
<div class="tool-body">
<compre-picture></compre-picture>
</div>
</el-tab-pane>
<el-tab-pane label="其他" name="sixth"><div class="tool-body">用户管理</div></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import cussService from './cus-service'
import cusUsers from './cus-users'
import takelScript from './takel-script'
import doutuPicture from './doutu-picture'
import comparisonMap from './comparison-map'
import comprePicture from './compre-picture'
import labelUserList from './label-userList'
export default{
data(){
return {
activeName:'second',
}
},
components: {
cussService,
cusUsers,
takelScript,
doutuPicture,
comparisonMap,
comprePicture,
labelUserList
},
methods: {
handleClick(){
console.log(43434)
}
}
}
</script>
<style lang="stylus" scoped>
.tabs-body
height:800px;
width:100%;
.tool-body
width:100%;
height:729px;
overflow-y: auto;
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment