Skip to content

Commit

Permalink
fix(styles): template
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeekQiaQia
GeekQiaQia committed Jul 4, 2021
1 parent 84c6775 commit 3a97382
Show file tree
Hide file tree
Showing 7 changed files with 226 additions and 245 deletions.
15 changes: 6 additions & 9 deletions src/views/Dashboard/test.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<div class="analysisInfo">
<fragment>
<div class="info">
<span style="display: block; font-size: 24px; margin: 24px 0">数据可视化</span>
<span style="text-align: left">数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息，</span>
</div>
</fragment>
<div class="info">
<span style="display: block; font-size: 24px; margin: 24px 0">数据可视化</span>
<span style="text-align: left">数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息，</span>
</div>
<!-- <el-row>
<el-col :offset="1" :span="15">
<div class="grid-content bg-purple-dark">
Expand All @@ -16,9 +14,8 @@
</el-col>
</el-row> -->
<div class="echart-container">
<fragment>
<div ref="lineEchart" style="width: 100%; height: 400px" class="echart"></div>
</fragment>
<div ref="lineEchart" style="width: 100%; height: 400px" class="echart"></div>

<div class="bottom-chart">
<div ref="refEchart" style="width: 49%; height: 400px" class="echart"></div>
<div ref="radarEchart" style="width: 49%; height: 400px" class="echart"></div>
Expand Down
10 changes: 4 additions & 6 deletions src/views/Editor/jsonEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
<el-card class="box-card">
<fragment>
<div style="text-align: left">
<span>JSON编辑器</span>
<el-divider></el-divider>
</div>
</fragment>
<div style="text-align: left">
<span>JSON编辑器</span>
<el-divider></el-divider>
</div>
<div class="form-container">
<el-form ref="form" :model="selectForm" label-width="120px">
<el-form-item label="主题 theme" :inline="true" label-position="right">
Expand Down
10 changes: 4 additions & 6 deletions src/views/Editor/richEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
<el-card class="box-card">
<fragment>
<div style="text-align: left">
<span>富文本编辑器</span>
<el-divider></el-divider>
</div>
</fragment>
<div style="text-align: left">
<span>富文本编辑器</span>
<el-divider></el-divider>
</div>
<div ref="reditor"></div>
</el-card>
</div>
Expand Down
215 changes: 104 additions & 111 deletions src/views/Form/advanceForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<div class="FormInfo">
<fragment>
<div class="info">
<el-divider content-position="left">高级表单</el-divider>
<span style="text-align: left">高级表单常见于一次性输入和提交大批量数据的场景。</span>
</div>
</fragment>
<div class="info">
<el-divider content-position="left">高级表单</el-divider>
<span style="text-align: left">高级表单常见于一次性输入和提交大批量数据的场景。</span>
</div>
<el-row>
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
Expand All @@ -18,69 +16,66 @@
<div></div>
</div>
</template>
<div style="text-align: left">
<span>记录管理</span>
<el-divider></el-divider>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名" width="180">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top">
<template #default>
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
</template>
<template #reference>
<el-input v-if="scope.row.edit" v-model="scope.row.name"></el-input>
<div v-else class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.province"></el-input>
<span v-else>{{ scope.row.province }}</span>
</template>
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.city"></el-input>
<span v-else>{{ scope.row.city }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="详细地址">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.address"></el-input>
<span v-else>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button v-if="scope.row.edit" size="mini" type="success" icon="el-icon-check" @click="handleSave(scope.$index, scope.row)">保存</el-button>

<fragment>
<div style="text-align: left">
<span>记录管理</span>
<el-divider></el-divider>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名" width="180">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top">
<template #default>
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
</template>
<template #reference>
<el-input v-if="scope.row.edit" v-model="scope.row.name"></el-input>
<div v-else class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.province"></el-input>
<span v-else>{{ scope.row.province }}</span>
</template>
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.city"></el-input>
<span v-else>{{ scope.row.city }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="详细地址">
<template #default="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.address"></el-input>
<span v-else>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button v-if="scope.row.edit" size="mini" type="success" icon="el-icon-check" @click="handleSave(scope.$index, scope.row)">保存</el-button>

<el-button v-else size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除该条记录吗？"
@confirm="handleDelete(scope.$index, scope.row)"
>
<template #reference>
<el-button size="mini" icon="el-icon-delete" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="margin: 5px"><el-button @click="handleAddRecord">+ 新增记录</el-button></div>
</fragment>
<el-button v-else size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除该条记录吗？"
@confirm="handleDelete(scope.$index, scope.row)"
>
<template #reference>
<el-button size="mini" icon="el-icon-delete" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="margin: 5px"><el-button @click="handleAddRecord">+ 新增记录</el-button></div>
</el-card>
</div>
</el-col>
Expand All @@ -90,49 +85,47 @@
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
<el-card class="box-card">
<fragment>
<div style="text-align: left">
<span>活动管理</span>
<el-divider></el-divider>
</div>
<el-form ref="activityForm" style="text-align: left" :model="sizeForm" label-width="80px" size="mini">
<el-form-item label="活动名称">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="sizeForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker v-model="sizeForm.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="sizeForm.date2" placeholder="选择时间" style="width: 100%"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="线上品牌商赞助"></el-radio>
<el-radio border label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</fragment>
<div style="text-align: left">
<span>活动管理</span>
<el-divider></el-divider>
</div>
<el-form ref="activityForm" style="text-align: left" :model="sizeForm" label-width="80px" size="mini">
<el-form-item label="活动名称">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="sizeForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker v-model="sizeForm.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="sizeForm.date2" placeholder="选择时间" style="width: 100%"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="线上品牌商赞助"></el-radio>
<el-radio border label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-card>
</div></el-col
>
Expand Down
10 changes: 4 additions & 6 deletions src/views/Form/formInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<div class="FormInfo">
<fragment>
<div class="info">
<el-divider content-position="left">基础表单</el-divider>
<span style="text-align: left">用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。</span>
</div>
</fragment>
<div class="info">
<el-divider content-position="left">基础表单</el-divider>
<span style="text-align: left">用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。</span>
</div>
<el-row>
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
Expand Down
23 changes: 11 additions & 12 deletions src/views/Form/stepForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<template>
<div class="stepForm">
<fragment>
<div class="info">
<el-divider content-position="left">分步表单</el-divider>
<span style="text-align: left">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</span>
</div>
</fragment>
<div class="info">
<el-divider content-position="left">分步表单</el-divider>
<span style="text-align: left">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</span>
</div>

<el-row>
<el-col :offset="1" :span="22">
<div class="grid-content bg-purple-dark">
Expand All @@ -23,7 +22,7 @@
<el-step title="确认转账信息" description="请仔细核对转账信息"></el-step>
<el-step title="完成" description="操作成功"></el-step>
</el-steps>
<fragment v-if="active == 0">
<template v-if="active == 0">
<el-form ref="accountForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
<el-form-item label="付款账户" prop="payAccountNo">
<el-input v-model="ruleForm.payAccountNo"></el-input>
Expand All @@ -49,8 +48,8 @@
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</fragment>
<fragment v-else-if="active == 1">
</template>
<template v-else-if="active == 1">
<el-form ref="accountForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="付款账户" prop="payAccountNo">
<el-input v-model="ruleForm.payAccountNo" readonly></el-input>
Expand All @@ -70,14 +69,14 @@
<el-button @click="handleLastStep()">上一步</el-button>
</el-form-item>
<el-divider></el-divider>
</fragment>
<fragment v-else-if="active == 3">
</template>
<template v-else-if="active == 3">
<el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
<template #extra>
<el-button type="primary" size="medium" @click="handleRedo">再转一笔</el-button>
</template>
</el-result>
</fragment>
</template>
</el-card>
</div>
</el-col>
Expand Down
Loading

0 comments on commit 3a97382

Please sign in to comment.