yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式细节调整

Browse Source
This commit is contained in:
蒋吉兆
2021-09-19 22:59:13 +08:00
parent a2f2b4178a
commit d04ee96111
8 changed files with 189 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/dashboard/index.vue
+36 -43
View File
@@ -1,12 +1,12 @@
<template>
<div class="page">
<div class="gva-card-box">
<div class="gva-card dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<div class="gva-card gva-top-card">
<div class="gva-top-card-left">
<div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="gva-top-card-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="gva-top-card-left-rows">
<el-row>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
@@ -24,30 +24,26 @@
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
</div>
<div class="gva-card-box">
<div class="gva-card dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
<div>
<div class="gva-top-card-left-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="gva-top-card-left-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
<img src="@/assets/dashbord.png" class="gva-top-card-right" alt>
</div>
</div>
<div class="gva-card-box">
@@ -183,8 +179,8 @@ export default {
overflow: hidden;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.dashbord1 {
height: 196px;
.gva-top-card {
height: 260px;
@include flex-center;
justify-content: space-between;
color: #777;
@@ -192,7 +188,6 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&-title {
font-size: 22px;
color: #343844;
@@ -200,13 +195,21 @@ export default {
&-dot {
font-size: 14px;
color: #6B7687;
margin-top: 24px;
}
&-rows {
// margin-top: 15px;
margin-top: 18px;
color: #6B7687;
width: 600px;
align-items: center;
}
&-item{
+.gva-top-card-left-item{
margin-top: 24px;
}
margin-top: 14px;
}
}
&-right {
height: 600px;
@@ -222,16 +225,6 @@ export default {
padding-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
}
.dashbord2 {
@include flex-center;
justify-content: flex-start;
&-item {
&+.dashbord2-item{
margin-top:24px;
}
line-height: 25px;
}
}
.quick-entrance-title {
height: 30px;
font-size: 22px;
@@ -284,7 +277,7 @@ export default {
@media (max-width: 750px) {
.gva-card {
padding: 20px 10px !important;
.dashbord1 {
.gva-top-card {
height: auto;
&-left {
&-title {
@@ -299,7 +292,7 @@ export default {
display: none;
}
}
.dashbord2 {
.gva-middle-card {
&-item {
line-height: 20px;
}
web/src/view/layout/index.vue
+4 -4
View File
@@ -21,14 +21,14 @@
<el-col>
<el-header class="header-cont">
<el-row class="pd-0">
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
<div class="menu-total" @click="totalCollapse">
<i v-if="isCollapse" class="el-icon-s-unfold" />
<i v-else class="el-icon-s-fold" />
</div>
</el-col>
<el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14">
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
<el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
<el-breadcrumb class="breadcrumb">
<el-breadcrumb-item
v-for="item in matched.slice(1,matched.length)"
:key="item.path"
@@ -36,7 +36,7 @@
</el-breadcrumb>
</el-col>
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
<div class="fl-right right-box">
<div class="right-box">
<Search />
<Screenfull class="screenfull" :style="{cursor:'pointer'}" />
<el-dropdown>
web/src/view/layout/screenfull/index.vue
+5 -34
View File
@@ -1,38 +1,11 @@
<template>
<div @click="click">
<!-- <svg
t="1508738709248"
class="screenfull-svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2069"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32"
height="32"
v-if="isShow"
>
<path
d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"/>
<path
d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"/>
<path
d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"/>
<path
d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"/>
</svg> -->
<svg
v-if="isShow"
t="1590133227479"
class="screenfull-svg"
viewBox="0 0 1024 1024"
version="1.1"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
>
<path id="svg_1" d="m928.512,959.744a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z" />
@@ -63,8 +36,6 @@
xmlns="http://www.w3.org/2000/svg"
p-id="1862"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
>
<path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863" />
<path
@@ -135,13 +106,13 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.screenfull-svg {
width: 17px;
height: 17px;
width: 16px;
height: 16px;
cursor: pointer;
fill: #606266;
vertical-align: middle;
margin-right: 15px;
margin-right: 32px;
fill: rgba(0, 0, 0, 0.45);
}
</style>
web/src/view/layout/search/search.vue
+13 -8
View File
@@ -20,13 +20,16 @@
</div>
</transition>
<div
:style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
v-if="btnShow"
class="user-box"
>
<i :style="{cursor:'pointer',paddingLeft:'1px'}" class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
<i class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
</div>
<div :style="{display:'inline-block',float:'right'}" class="user-box">
<i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" />
<div
v-if="btnShow"
class="user-box"
>
<i class="el-icon-search search-icon" @click="showSearch()" />
</div>
</div>
</template>
@@ -41,6 +44,7 @@ export default {
return {
value: '',
show: false,
btnShow: true,
reload: false
}
},
@@ -55,8 +59,12 @@ export default {
},
hiddenSearch() {
this.show = false
setTimeout(() => {
this.btnShow = true
}, 500)
},
showSearch() {
this.btnShow = false
this.show = true
this.$nextTick(() => {
this.$refs['search-input'].focus()
@@ -74,10 +82,7 @@ export default {
</script>
<style scoped lang="scss">
.reload{
font-size: 17px;
&:hover{
transform: scale(1.02)
}
font-size: 18px;
}
.reloading{