1a69eeed by 任超

style:项目架构

1 parent 355719a5
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118748190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2584" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M938.666667 98.773333c16.128 0 29.226667 13.098667 29.226666 29.226667v528.64A114.56 114.56 0 0 1 853.333333 771.2h-334.208v68.437333h228.693334a29.226667 29.226667 0 0 1 4.352 58.154667l-4.309334 0.341333H236.928a29.226667 29.226667 0 0 1-4.309333-58.154666l4.266666-0.298667 223.786667-0.042667v-68.437333h-356.266667a29.226667 29.226667 0 0 1-28.928-24.917333l-0.298666-4.266667V213.333333a114.56 114.56 0 0 1 114.56-114.56z m-29.269334 58.453334H189.738667c-30.976 0-56.106667 25.130667-56.106667 56.106666v499.413334H853.333333c29.013333 0 52.906667-22.058667 55.808-50.346667l0.298667-5.76-0.042667-499.413333zM640 292.565333a146.304 146.304 0 0 1 122.026667 226.986667l51.029333 50.986667a29.269333 29.269333 0 0 1-37.717333 44.458666l-3.626667-3.072-51.029333-51.029333A146.304 146.304 0 1 1 640 292.522667z m-271.573333 210.773334a29.226667 29.226667 0 0 1 4.352 58.154666l-4.352 0.298667H273.066667a29.226667 29.226667 0 0 1-4.309334-58.112l4.309334-0.341333h95.36zM640 351.146667a87.765333 87.765333 0 1 0 0 175.530666 87.765333 87.765333 0 0 0 0-175.530666z m-189.226667-71.125334a29.226667 29.226667 0 0 1 4.266667 58.154667l-4.266667 0.298667H273.066667a29.226667 29.226667 0 0 1-4.309334-58.154667l4.309334-0.298667h177.706666z" fill="#ffffff" p-id="2585"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118934834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3136" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M822.869333 519.296c10.624 0 20.394667 5.76 25.6 15.061333l91.392 164.565334a29.269333 29.269333 0 0 1 0 28.416l-91.434666 164.565333a29.269333 29.269333 0 0 1-25.6 15.061333H640a29.269333 29.269333 0 0 1-25.6-15.061333l-91.392-164.565333a29.269333 29.269333 0 0 1 0-28.416l91.434667-164.565334a29.269333 29.269333 0 0 1 25.557333-15.061333z m36.565334-420.565333c14.677333 0 26.88 10.837333 28.928 24.96L888.746667 128v267.093333a29.269333 29.269333 0 0 1-58.197334 4.309334l-0.341333-4.309334V157.226667H213.333333c-29.013333 0-52.906667 22.101333-55.808 50.346666L157.269333 213.333333l-0.042666 397.397334h272.298666a29.44 29.44 0 0 1 4.693334 0.384 29.269333 29.269333 0 0 1 33.578666 24.576l0.298667 4.309333v208.426667h62.208a29.269333 29.269333 0 0 1 4.266667 58.24l-4.266667 0.298666h-256a29.269333 29.269333 0 0 1-4.352-58.197333l4.352-0.298667h135.253333v-179.2H128a29.269333 29.269333 0 0 1-28.928-24.96L98.730667 640V213.333333A114.602667 114.602667 0 0 1 206.08 98.986667L213.333333 98.730667h646.101334z m-53.76 479.061333h-148.437334l-75.178666 135.296 75.178666 135.338667h148.48l75.136-135.338667-75.178666-135.253333z" fill="#ffffff" p-id="3137"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118828860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2768" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M889.898667 98.730667c16.170667 0 29.269333 13.098667 29.269333 29.269333v719.232a114.602667 114.602667 0 0 1-114.602667 114.602667H128a71.936 71.936 0 0 1-71.936-71.936V213.333333A114.602667 114.602667 0 0 1 170.666667 98.730667z m-29.269334 58.496H170.666667c-30.976 0-56.064 25.173333-56.064 56.106666v676.565334c0 7.424 5.973333 13.397333 13.397333 13.397333h676.565333c30.976 0 56.064-25.088 56.064-56.064V157.226667zM597.333333 457.173333a146.304 146.304 0 0 1 134.826667 203.093334l68.693333 68.778666a29.269333 29.269333 0 0 1-37.717333 44.458667l-3.626667-3.114667-61.184-61.141333A146.304 146.304 0 1 1 597.333333 457.130667z m-219.434666 244.992a29.269333 29.269333 0 0 1 4.309333 58.197334l-4.266667 0.341333h-146.346666a29.269333 29.269333 0 0 1-4.266667-58.197333l4.266667-0.341334h146.346666zM597.333333 515.669333a87.765333 87.765333 0 1 0 0 175.530667 87.765333 87.765333 0 0 0 0-175.530667z m-219.434666 3.626667a29.269333 29.269333 0 0 1 4.309333 58.197333l-4.266667 0.341334h-146.346666a29.269333 29.269333 0 0 1-4.266667-58.197334l4.266667-0.341333h146.346666zM743.68 299.946667a29.269333 29.269333 0 0 1 4.266667 58.197333l-4.266667 0.298667h-512a29.269333 29.269333 0 0 1-4.352-58.197334l4.352-0.298666h512z" fill="#ffffff" p-id="2769"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660118877999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2952" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M779.008 56.064c14.72 0 26.88 10.837333 28.970667 24.96l0.298666 4.309333v692.181334c0 14.72-10.837333 26.88-24.917333 28.970666l-4.352 0.298667H229.632a29.269333 29.269333 0 0 1-4.352-58.197333l4.352-0.298667 520.106667-0.042667V114.56H170.666667c-29.013333 0-52.906667 22.101333-55.808 50.346667L114.602667 170.666667l-0.042667 689.962666H810.666667c29.013333 0 52.906667-22.058667 55.808-50.346666l0.256-5.717334V262.528a29.269333 29.269333 0 0 1 58.197333-4.309333l0.341333 4.309333v542.037333a114.602667 114.602667 0 0 1-107.349333 114.346667l-7.253333 0.256H85.333333a29.269333 29.269333 0 0 1-28.928-24.96l-0.341333-4.266667V170.666667A114.602667 114.602667 0 0 1 163.413333 56.32L170.666667 56.064h608.341333z m-236.544 219.434667c10.112 0 19.456 5.205333 24.832 13.738666l91.434667 146.304a29.269333 29.269333 0 0 1 0 31.018667l-91.434667 146.261333a29.269333 29.269333 0 0 1-24.832 13.781334H359.68a29.269333 29.269333 0 0 1-24.832-13.781334l-91.434667-146.261333a29.269333 29.269333 0 0 1 0-31.018667l91.434667-146.304a29.269333 29.269333 0 0 1 24.832-13.738666z m-16.213333 58.496H375.893333l-73.173333 117.034666 73.173333 117.034667h150.357334l73.173333-117.034667-73.173333-117.034666z" fill="#ffffff" p-id="2953"></path></svg>
\ No newline at end of file

6.3 KB | W: | H:

34.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -24,11 +24,13 @@ export default {
<style lang="scss" scoped>
.hasTagsView {
.app-main {
height: calc(100% - 88px);
height: calc(100% - 48px);
overflow-x: auto;
padding: 15px;
box-sizing: border-box;
background-color: #fefefe;
background-color: #EDF1F7;
box-sizing: border-box;
}
}
</style>
\ No newline at end of file
......
<template>
<div class="navbar">
<div class="logo">
<img v-if="logo" :src="logo" class="header-logo">
</div>
<div class="backdrop"></div>
<div class="right-menu">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
<el-dropdown class="avatar-container right-menu-item hover-effect" @command="handleCommand">
<div class="avatar-wrapper">
<span style="padding-right:10px">{{ name }}</span>
<img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
......@@ -16,10 +20,16 @@
</template>
<script>
import { mapGetters } from 'vuex'
import logonImg from '@/image/logo.png'
export default {
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
data () {
return {
logo: logonImg
}
},
methods: {
searchMessageCenter () {
this.$router.push({ name: 'messagecenter' })
......@@ -75,11 +85,28 @@ export default {
}
.navbar {
height: 40px;
height: $headerHeight;
overflow: hidden;
position: relative;
background: #fff;
background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%);
box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
.header-logo {
width: 300px;
}
.backdrop {
flex: 1;
width: 60%;
background: url('../../image/backdrop.png');
background-size: 100% 100%;
height: $headerHeight;
}
.hamburger-container {
line-height: 43px;
......@@ -136,12 +163,14 @@ export default {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: #fff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
......@@ -150,8 +179,6 @@ export default {
}
.avatar-container {
margin-right: 20px;
.avatar-wrapper {
position: relative;
display: flex;
......
<template>
<div class="app-wrapper">
<sidebar class="sidebar-container" />
<navbar />
<div :class="{ hasTagsView: needTagsView }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<sidebar class="sidebar-container" />
<tags-view v-if="needTagsView" />
</div>
<app-main />
......
......@@ -88,7 +88,7 @@ export const asyncRoutes = [
id: '9',
parentId: null,
component: Layout,
meta: { title: '申请查询', icon: 'fykf' },
meta: { title: '申请查询', icon: 'sqcx' },
redirect: '/sqcx/jtfc',
alwaysShow: true,
name: 'sqcx',
......@@ -124,7 +124,7 @@ export const asyncRoutes = [
id: '13',
parentId: null,
component: Layout,
meta: { title: '综合查询', icon: 'fykf' },
meta: { title: '综合查询', icon: 'zhcx' },
redirect: '/zhcx/jdcx',
alwaysShow: true,
name: 'zhcx',
......@@ -160,7 +160,7 @@ export const asyncRoutes = [
id: '17',
parentId: null,
component: Layout,
meta: { title: '证书管理', icon: 'fykf' },
meta: { title: '证书管理', icon: 'zsgl' },
redirect: '/zsgl/zsrk',
alwaysShow: true,
name: 'zsgl',
......@@ -196,7 +196,7 @@ export const asyncRoutes = [
id: '21',
parentId: null,
component: Layout,
meta: { title: '系统管理', icon: 'fykf' },
meta: { title: '系统管理', icon: 'system' },
redirect: '/system/dictionaries',
alwaysShow: true,
name: 'system',
......
//*****start*通用查询条件,列表样式******//
.from-clues {
padding: 10px;
background: #f7f7f7;
min-width: 1280px;
height: 100%;
width: 100%;
......
#app {
.main-container {
height: 100%;
height: calc(100% - 80px);
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
}
......@@ -8,10 +8,10 @@
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
height: 100%;
height: calc(100% - $headerHeight);
position: fixed;
font-size: 0px;
top: 0;
top: $headerHeight;
bottom: 0;
left: 0;
z-index: 1001;
......@@ -38,19 +38,11 @@
}
.el-scrollbar {
height: 100%;
&::-webkit-scrollbar {
display: none;
}
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 150px);
}
}
.is-horizontal {
display: none;
}
......
......@@ -8,10 +8,13 @@ $tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// header
$headerHeight: 80px;
// sidebar
$menuText:#ffffff;
$menuActiveText:#ffffff;
$subMenuActiveText:#ffffff; // https://github.com/ElemeFE/element/issues/12951
$subMenuActiveText:#ffffff;
$menuBg:#202B3D;
$menuHover:#0794FF;
......@@ -38,4 +41,5 @@ $borderColor: #EBEEF5;
sideBarWidth: $sideBarWidth;
sideBarFontSize: $sideBarFontSize;
borderColor: $borderColor;
headerHeight: $headerHeight;
}
\ No newline at end of file
......