Skip to content

G
gin-vue-admin

FLIPPED-AURORA / gin-vue-admin
10 个月 前同步成功

通知 324
Star 18154
Fork 5505
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 0438ab16 编写于 作者: 1 1319612909
浏览文件
操作

手机端ui

上级 bf975af6
隐藏空白更改
内联 并排
Showing with 332 addition and 195 deletion
web/src/App.vue
浏览文件 @ 0438ab16
......@@ -15,6 +15,7 @@ export default {
// 引入初始化样式
@import '@/style/main.scss';
@import '@/style/base.scss';
@import '@/style/mobile.scss';
#app {
background: #eee;
height: 100vh;
......
web/src/style/basics.scss
浏览文件 @ 0438ab16
......@@ -32,3 +32,6 @@ $color-table-tbody:#595959;
$color-table-thead:#262626;
// dashboard
$height-car:68px;
// mobile
$padding-xs: 5px;
$margin-xs: 5px;
web/src/style/main.scss
浏览文件 @ 0438ab16
......@@ -1204,6 +1204,14 @@ $mainHight: 100vh;
top: 0;
box-sizing: border-box;
z-index: 999;
>.el-row{
padding: 0;
.el-col-lg-14{
height: 60px;
}
}
}
......@@ -1387,14 +1395,14 @@ $mainHight: 100vh;
.car-left {
height: $height-car;
width: 70%;
float: left;
// width: 70%;
// float: left;
}
.car-right {
height: $height-car;
width: 29%;
float: left;
// width: 29%;
// float: left;
.flow,
.user-number,
......
web/src/style/mobile.scss 0 → 100644
浏览文件 @ 0438ab16
@import '@/style/basics.scss';
@media screen and (min-width: 320px)and (max-width: 750px){
.el-header{
padding: 0 $padding-xs;
}
.layout-cont {
.main-cont{
.breadcrumb{
padding: 0 $padding-xs;
}
}
}
.layout-cont{
.right-box{
margin-right: $margin-xs;
}
}
.search-component{
width: 30px;
}
.screenfull{
width: 26px;
text-align: center;
}
.el-main{
.admin-box{
margin-left: 0;
margin-right: 0;
}
.big.admin-box{
padding: 0 0 15px 0;
}
.big {
.bottom {
.chart-player{
height: auto!important;
margin-bottom: 15px;
}
.todoapp{
background-color: #fff;
padding-bottom: 10px;
}
}
}
}
.card .car-left,
.card .car-right{
width: 100%;
height: 100%;
}
.card{
padding-left: $padding-xs;
padding-right: $padding-xs;
}
.card {
.text{
width: 100%;
h4{
white-space: break-spaces;
}
}
}
.shadow{
margin-left: 5px;
margin-right: 5px;
.grid-content{
margin-bottom: 10px;
padding: 0;
}
}
.el-dialog{
width: 90%;
}
.el-transfer{
.el-transfer-panel{
width: 40%;
display: inline-block;
}
.el-transfer__buttons{
padding: 0 5px;
display: inline-block;
}
}
}
\ No newline at end of file
web/src/view/dashboard/index.vue
浏览文件 @ 0438ab16
<template>
<div class="big">
<div class="card">
<div class="car-left">
<div>
<span class="card-img"> <img :src="userInfo.headerImg" alt="" > </span>
<div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon"></i>
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
</p>
</div>
</div>
</div>
<div class="car-right">
<el-row>
<el-col :span="8"><div class="car-item">
<span class="flow"><i class="el-icon-s-grid"></i></span>
<span>今日流量 </span>
<b>13260</b>
</div></el-col>
<el-col :span="8"><div class="car-item">
<span class="user-number">
<i class="el-icon-s-custom "></i>
</span>
<span>总用户 </span>
<b>48286</b>
</div></el-col>
<el-col :span="8"><div class="car-item ">
<span class="feedback">
<i class="el-icon-star-on"></i>
</span>
<span>好评率 </span>
<b>98%</b>
</div></el-col>
</el-row>
</div>
</div>
<div class="shadow">
<el-row :gutter="20">
<el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{color:card.color}"></i>
<p>{{card.label}}</p>
</el-card>
</el-col>
<div class="big">
<el-row>
<div class="card">
<el-col :xs="24" :lg="16" :md="16" >
<div class="car-left">
<el-row>
<div>
<el-col :xs="4" :md="3" :lg="3">
<span class="card-img">
<img :src="userInfo.headerImg" alt="" />
</span>
</el-col>
<el-col :xs="20" :lg="12" :md="12">
<div class="text">
<h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon"></i>
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
</p>
</div>
</el-col>
</div>
</el-row>
</div>
<div class="bottom">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-player">
<musicPlayer />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-player">
<todo-list />
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :lg='8' :md="8">
<div class="car-right">
<el-row>
<el-col :span="8"
><div class="car-item">
<span class="flow"><i class="el-icon-s-grid"></i></span>
<span>今日流量 </span>
<b>13260</b>
</div></el-col
>
<el-col :span="8"
><div class="car-item">
<span class="user-number">
<i class="el-icon-s-custom"></i>
</span>
<span>总用户 </span>
<b>48286</b>
</div></el-col
>
<el-col :span="8"
><div class="car-item">
<span class="feedback">
<i class="el-icon-star-on"></i>
</span>
<span>好评率 </span>
<b>98%</b>
</div></el-col
>
</el-row>
</div>
</el-col>
</div>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
:span="4"
v-for="(card, key) in toolCards"
:key="key"
@click.native="toTarget(card.name)"
:xs="8"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }"></i>
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div>
<div class="bottom">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-player">
<musicPlayer />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-player">
<todo-list />
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import musicPlayer from "./component/musicPlayer"
import TodoList from "./component/todoList"
import { mapGetters } from 'vuex'
import musicPlayer from "./component/musicPlayer";
import TodoList from "./component/todoList";
import { mapGetters } from "vuex";
export default {
name: 'Dashboard',
name: "Dashboard",
data() {
return {
toolCards:[
{
label:"用户管理",
icon:"el-icon el-icon-monitor",
name:"user",
color:"#ff9c6e"
},
{
label:"角色管理",
icon:"el-icon el-icon-setting",
name:"authority",
color:"#69c0ff"
},
{
label:"菜单管理",
icon:"el-icon el-icon-menu",
name:"menu",
color:"#b37feb"
},
{
label:"代码生成器",
icon:"el-icon el-icon-cpu",
name:"autoCode",
color:"#ffd666"
},
{
label:"表单生成器",
icon:"el-icon el-icon-document-checked",
name:"formCreate",
color:"#ff85c0"
},
{
label:"关于我们",
icon:"el-icon el-icon-user",
name:"about",
color:"#5cdbd3"
}
]
}
toolCards: [
{
label: "用户管理",
icon: "el-icon el-icon-monitor",
name: "user",
color: "#ff9c6e",
},
{
label: "角色管理",
icon: "el-icon el-icon-setting",
name: "authority",
color: "#69c0ff",
},
{
label: "菜单管理",
icon: "el-icon el-icon-menu",
name: "menu",
color: "#b37feb",
},
{
label: "代码生成器",
icon: "el-icon el-icon-cpu",
name: "autoCode",
color: "#ffd666",
},
{
label: "表单生成器",
icon: "el-icon el-icon-document-checked",
name: "formCreate",
color: "#ff85c0",
},
{
label: "关于我们",
icon: "el-icon el-icon-user",
name: "about",
color: "#5cdbd3",
},
],
};
},
computed: {
...mapGetters('user', ['userInfo'])
computed: {
...mapGetters("user", ["userInfo"]),
},
components:{
musicPlayer, //音乐播放器
TodoList, //TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
},
methods:{
toTarget(name){
this.$router.push({name})
}
components: {
musicPlayer, //音乐播放器
TodoList, //TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
},
methods: {
toTarget(name) {
this.$router.push({ name });
},
}
},
};
</script>
<style lang="scss" scoped>
.big{
margin:100px 0 0 0;
padding-top: 0;
background-color: rgb(243,243,243);
padding-top: 15px;
.top{
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container{
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
}
}
.mid{
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.bottom{
width: 100%;
height: 300px;
// margin: 20px 0;
.el-row{
margin-right: 4px !important;
}
.chart-player{
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
}
}
.big {
margin: 100px 0 0 0;
padding-top: 0;
background-color: rgb(243, 243, 243);
padding-top: 15px;
.top {
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
}
}
.mid {
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.bottom {
width: 100%;
height: 300px;
// margin: 20px 0;
.el-row {
margin-right: 4px !important;
}
.chart-player {
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
}
}
}
</style>
web/src/view/example/form/form.vue
浏览文件 @ 0438ab16
......@@ -2,12 +2,12 @@
<div>
<el-form :model="form" label-width="80px" ref="form">
<el-row>
<el-col :span="3"><label for="">活动名称</label></el-col>
<el-col :span="10"><el-input v-model="form.name"></el-input></el-col>
<el-col :span="3" :xs="6"><label for="">活动名称</label></el-col>
<el-col :span="10" :xs="14"><el-input v-model="form.name"></el-input></el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">活动区域</label></el-col>
<el-col :span="10">
<el-col :span="3" :xs="6"><label for="">活动区域</label></el-col>
<el-col :span="10" :xs="14">
<el-select placeholder="请选择活动区域" v-model="form.region">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
......@@ -15,8 +15,8 @@
</el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">活动时间</label></el-col>
<el-col :span="10">
<el-col :span="3" :xs="6"><label for="">活动时间</label></el-col>
<el-col :span="10" :xs="18">
<el-col :span="11">
<el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
</el-col>
......@@ -27,12 +27,12 @@
</el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">即时配送</label></el-col>
<el-col :span="10"><el-switch v-model="form.delivery"></el-switch></el-col>
<el-col :span="3" :xs="6"><label for="">即时配送</label></el-col>
<el-col :span="10" :xs="14"><el-switch v-model="form.delivery"></el-switch></el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">活动性质</label></el-col>
<el-col :span="10">
<el-col :span="3" :xs="6"><label for="">活动性质</label></el-col>
<el-col :span="10" :xs="14">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
......@@ -42,8 +42,8 @@
</el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">特殊资源</label></el-col>
<el-col :span="10">
<el-col :span="3" :xs="6"><label for="">特殊资源</label></el-col>
<el-col :span="10" :xs="14">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
......@@ -51,12 +51,12 @@
</el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">活动形式</label></el-col>
<el-col :span="10"><el-input type="textarea" v-model="form.desc"></el-input></el-col>
<el-col :span="3" :xs="6"><label for="">活动形式</label></el-col>
<el-col :span="10" :xs="14"><el-input type="textarea" v-model="form.desc"></el-input></el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">穿梭框</label></el-col>
<el-col :span="20">
<el-col :span="3" :xs="6"><label for="">穿梭框</label></el-col>
<el-col :span="20" :xs="24">
<el-transfer
:data="data"
:filter-method="filterMethod"
......@@ -67,7 +67,7 @@
</el-col>
</el-row>
<el-row>
<el-col :span="3"><label for="">活动时间</label></el-col>
<el-col :span="3" :xs="6"><label for="">活动时间</label></el-col>
<el-col :span="10"><el-input v-model="form.name"></el-input></el-col>
</el-row>
<el-row type="flex" justify="center">
......
web/src/view/layout/index.vue
浏览文件 @ 0438ab16
......@@ -16,18 +16,25 @@
:style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
class="topfix"
>
<el-row>
<!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
<el-header class="header-cont">
<div @click="totalCollapse" class="menu-total">
<i class="el-icon-s-unfold" v-if="isCollapse"></i>
<i class="el-icon-s-fold" v-else></i>
</div>
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
<el-breadcrumb-item
:key="item.path"
v-for="item in matched.slice(1,matched.length)"
>{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<div class="fl-right right-box">
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
<div @click="totalCollapse" class="menu-total">
<i class="el-icon-s-unfold" v-if="isCollapse"></i>
<i class="el-icon-s-fold" v-else></i>
</div>
</el-col>
<el-col :xs="10" :lg="14" :md='14' :sm="14" :xl="14">
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
<el-breadcrumb-item
:key="item.path"
v-for="item in matched.slice(1,matched.length)"
>{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :xs="12" :lg="9" :md="9" :sm="9" :xl="9">
<div class="fl-right right-box">
<Search />
<Screenfull class="screenfull"></Screenfull>
<el-dropdown>
......@@ -48,7 +55,10 @@
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
</el-header>
</el-row>
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
<!--
:to="{ path: item.path }" 暂时注释不用-->
......@@ -172,8 +182,9 @@ export default {
}
}
</script>
<style lang="scss">
@import '@/style/mobile.scss';
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或