Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
cad71d88 by 任超
Options

style:部署

2 parents 7a5ffe6e 1edd2157
Expand all
Inline Side-by-side
Showing 50 changed files with 720 additions and 938 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 09:42:59
-->
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
......@@ -15,4 +20,3 @@ npm install --registry=https://registry.npm.taobao.org
- `chore` 依赖更新/脚手架配置修改等
- `wip` 开发中
......
{
"TITLE": "汉中市数据上报系统",
"THEME": "jg",
"THEME": "sb",
"CODE": "BDCJGPT",
"SERVERAPI": "/bdcsjsb",
"MANAGEMENTAPI": "http://192.168.2.236/management"
"MANAGEMENTAPI": "http://192.168.2.38:8090/management"
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-24 15:07:01
-->
<template>
<div id="app">
<router-view />
</div>
</template>
\ No newline at end of file
</template>
......
/*
* @Description: 这个是所有api的前缀配置文件
* @Autor: renchao
* @LastEditTime: 2023-03-21 16:26:55
* @LastEditTime: 2023-03-24 16:51:18
*/
export default {
SERVERAPI: '/bdcsjsb', //赵千
MANAGEMENTAPI: 'http://192.168.2.236/management'
MANAGEMENTAPI: 'http://192.168.2.38:8090/management'
}
\ No newline at end of file
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 13:17:59
* @LastEditTime: 2023-03-24 09:28:25
*/
import request from '@/utils/request'
// let SERVER = JSON.parse(localStorage.getItem('ApiUrl'))
let SERVER = JSON.parse(localStorage.getItem('ApiUrl'))
console.log(JSON.parse(localStorage.getItem('ApiUrl')));
// 获取用户信息
export function getUserInfo () {
return request({
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 09:53:16
*/
import dialogBox from '@/components/DialogBox'
import LbTable from '@/components/LbTable'
import Theme from '@/components/Theme.vue'
import Breadcrumb from "@/components/Breadcrumb.vue";
// 引入按钮
import btn from '@/components/Button.vue'
......@@ -12,8 +16,6 @@ export default {
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('btn', btn);
Vue.component('lbTable', LbTable);
Vue.component('Theme', Theme);
Vue.prototype.$popup = Popup.install;
Vue.prototype.$alertMes = MessageBox.alert;
}
}
\ No newline at end of file
......
<template>
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox dataReporting editDialogBox mainCenter"
:visible.sync="dialogVisible" width="92%">
<div slot="title" class="dialog_title" ref="dialogTitle">
{{ title || '详情' }}
......@@ -335,194 +335,11 @@
}
</script>
<style scoped lang="scss">
// @import "~@/styles/mixin.scss";
// @import "~@/styles/dialogBox.scss";
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
/deep/ .el-tabs {
color: #cef8ff;
}
.d-center {
z-index: 1000;
}
.sjmx {
display: flex;
flex-direction: column;
height: 49vh;
/deep/.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
.result {
flex: 1;
height: 100%;
}
.editDialogBox-con {
flex: 1;
height: 100%;
overflow-y: hidden;
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-tabs__nav-scroll {
background: none;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
/deep/.el-tabs__header {
border: none;
margin-bottom: 0;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-tabs__item.is-top {
background-color: none !important;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
border-top: none;
}
/deep/.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.dialog_footer {
flex-direction: column;
.dialog_button {
margin-top: 8px;
}
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
/deep/.el-select {
padding-right: 15px;
}
/deep/.el-icon-circle-close {
display: none;
}
/deep/.el-input__suffix {
right: -25px !important;
top: -5px;
}
/deep/.el-select,
/deep/.el-input {
flex: 1;
width: 100%;
}
/deep/.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 18px;
color: #d7eaee;
margin: 3px 0;
}
}
</style>
......
<template>
<el-color-picker v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]"
class="theme-picker" popper-class="theme-picker-dropdown" />
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data () {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme () {
return this.$store.state.app.theme
}
},
watch: {
defaultTheme: {
handler: function (val, oldVal) {
this.theme = val
},
immediate: true
},
async theme (val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const $message = this.$message({
message: ' Compiling the theme',
customClass: 'theme-message',
type: 'success',
duration: 0,
iconClass: 'el-icon-loading'
})
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
$message.close()
}
},
methods: {
updateStyle (style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString (url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster (theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
\ No newline at end of file
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-24 17:10:02
-->
<template>
<div v-if="!item.hidden">
<template
......@@ -65,9 +70,9 @@ export default {
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// if (showingChildren.length === 1) {
// return true
// }
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 16:17:42
* @LastEditTime: 2023-03-24 17:10:32
-->
<template>
<div>
......@@ -9,7 +9,7 @@
<el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(4)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(5)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......@@ -50,7 +50,7 @@ export default {
}
},
mounted () {
console.log(this.permission_routes, 'permission_routespermission_routes');
console.log(this.permission_routes.slice(5), 'permission_routes');
}
}
</script>
......
......@@ -3,7 +3,8 @@
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent.native="openMenu(tag, $event)">
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
......@@ -190,30 +191,32 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/_handle.scss";
.tags-view-container {
height: 40px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin-bottom: 5px;
padding-top: 2px;
margin-bottom: 7px;
border-radius: 4px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
color: #4A4A4A;
@include font_color("tagsText");
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
@include borderColor("tagsBorderColor");
&:first-of-type {
margin-left: 15px;
......@@ -224,13 +227,13 @@ export default {
}
&.active {
background-color: #0794FF;
color: #fff;
border-color: #0794FF;
@include background("tagsBg");
@include borderColor("tagsActiveText");
@include font_color("tagsActiveText");
&::before {
content: '';
background: #fff;
@include background("tagsActiveText");
display: inline-block;
width: 8px;
height: 8px;
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 16:37:20
* @LastEditTime: 2023-03-24 17:28:37
*/
import Vue from 'vue'
import router from "./router";
......@@ -25,7 +25,7 @@ router.beforeEach(async (to, from, next) => {
localStorage.removeItem("token");
next();
} else {
let code = Vue.prototype.BASE_API.THEME == "sb" ? "BDCSBPT" : "BDCJGPT"
let code = Vue.prototype.BASE_API.CODE
//判断token是否存在
const hasToken = localStorage.getItem("token");
if (hasToken) {
......
......@@ -32,11 +32,7 @@ export const constantRoutes = [
{
path: '/',
redirect: to => {
if (Vue.prototype.BASE_API.THEME == 'jg') {
return { path: '/jg' }
} else {
return { path: '/sb' }
}
return { path: `/${Vue.prototype.BASE_API.THEME}` }
},
},
// 监管首页
......
......@@ -20,6 +20,15 @@
@function themed($key) {
@return map-get($theme-map, $key);
}
//获取边框颜色
@mixin borderColor($color) {
@include themeify {
border: 1px solid themed($color) !important;
}
}
//获取渐变背景
@mixin background($color) {
@include themeify {
......@@ -33,9 +42,10 @@
background-color: themed($color) !important;
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
color: themed($color) !important;
}
}
\ No newline at end of file
......
......@@ -7,15 +7,19 @@ $themes: (blue: ( //背景
menuActiveText: #4162D8,
// 没有子集
submenuBg: #3D59C4,
submenuColor: #FFFFFF
),
submenuColor: #FFFFFF,
// tags
tagsBorderColor: #E5E5E5,
tagsBg: rgba(65, 98, 216, 0.1),
tagsText: #4A4A4A,
tagsActiveText: #4162D8,
// 操纵btn
btnBg: #4162D8,
btnColor: #4162D8),
green: (
navbg: #0F8B80,
green: (navbg: #0F8B80,
menuBg:#121A2E,
menuActive: linear-gradient(90deg, rgba(61,90,198,0.7) 0%, rgba(61,90,198,0) 100%),
menuActive: linear-gradient(90deg, rgba(61, 90, 198, 0.7) 0%, rgba(61, 90, 198, 0) 100%),
//字体
menuText: #A1A7C2,
menuActiveText: #FFFFFF
)
)
\ No newline at end of file
menuActiveText: #FFFFFF))
\ No newline at end of file
......
......@@ -4,7 +4,7 @@
**/
/* theme color */
$--color-primary: #0F93F6;
$--color-primary: #4162D8;
$--color-success: #67C23B;
$--color-warning: #E6A23C;
$--color-danger: #F46C6C;
......
......@@ -5,6 +5,7 @@
background: none !important;
}
// 列表样式
.tableClass {
.el-table {
border: none !important;
......@@ -52,6 +53,7 @@
background-color: rgba(0, 0, 0, 0);
}
// 查询表单样式
.from-clues {
height: 100%;
width: 100%;
......@@ -264,7 +266,7 @@
}
}
// 角色配置
// 角色管理人员菜单配置弹框样式
.roleconfiguration {
.el-dialog__body {
display: flex;
......@@ -358,82 +360,7 @@
border-top: none;
}
.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
height: 825px !important;
.dialog-from {
padding: 13px;
border-radius: 2px;
box-sizing: border-box;
.el-row {
display: flex;
flex-wrap: nowrap;
}
.el-col {
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #b5d6dc;
border-radius: 2px;
border: 1px solid #224c7c;
margin: 5px;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: #02d9fd;
}
p {
flex: 1;
width: 100%;
padding-left: 5px;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
white-space: nowrap;
margin-right: 5px;
text-align: right;
}
}
}
.dialog_title {
display: flex;
position: relative;
font-size: 24px;
top: -8px;
width: 38%;
height: 40px;
margin-left: 28px;
justify-content: center;
}
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.el-dialog__footer {
padding-right: 40px;
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
......@@ -514,16 +441,7 @@
font-size: 12px;
}
.button:hover {
// width: 76px;
// height: 32px;
// color: #ffffff;
// cursor: pointer;
// border: 0;
// font-size: 12px;
// background: none;
}
// 按钮样式
.cx {
background: url("../image/btn.png") no-repeat 0 -34px;
background-size: cover;
......@@ -627,7 +545,7 @@
}
.item-content-input {
/deep/.el-input__inner {
.el-input__inner {
border: none !important;
text-align: right;
}
......@@ -742,6 +660,7 @@
}
}
.contentCenter {
position: absolute;
top: 50%;
......@@ -761,3 +680,347 @@
}
}
// 登簿日志弹出框
.entryJournal {
.el-tabs__header {
margin: 0;
}
.el-dialog {
display: flex;
flex-direction: column;
}
.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
height: 100%;
flex: 1;
position: relative;
}
.regularHeight {
display: flex;
flex-direction: column;
height: 87vh;
margin-bottom: 5px;
.editDialogBox-con,
.JsonEditor {
flex: 1;
}
}
.d-center {}
.dialog_title {
top: -6px
}
.el-tabs__item {
color: #CEF8FF !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.el-tabs__nav {
display: flex;
border: none !important;
}
.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
.el-icon-circle-close {
display: none;
}
.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.from-clues-content {
margin-top: 0;
background: none;
padding: 0;
}
.editDialogBox-box {
position: relative;
top: 10px;
height: 100%;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
.el-input {
flex: 1;
width: 100%;
}
.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 14px;
color: #d7eaee;
margin: 3px 0;
}
}
}
// 数据上报弹出框
.dataReporting {
.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
.el-tabs {
color: #cef8ff;
}
.d-center {
z-index: 1000;
}
.sjmx {
display: flex;
flex-direction: column;
height: 49vh;
.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
.result {
flex: 1;
height: 100%;
}
.editDialogBox-con {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
.el-tabs__nav-scroll {
background: none;
}
.el-tabs__nav {
display: flex;
border: none !important;
}
.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
.el-tabs__header {
border: none;
margin-bottom: 0;
}
.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
.el-tabs__item.is-top {
background-color: none !important;
}
.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
border-top: none;
}
.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.dialog_footer {
flex-direction: column;
.dialog_button {
margin-top: 8px;
}
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
.el-select {
padding-right: 15px;
}
.el-icon-circle-close {
display: none;
}
.el-input__suffix {
right: -25px !important;
top: -5px;
}
.el-select,
.el-input {
flex: 1;
width: 100%;
}
.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 18px;
color: #d7eaee;
margin: 3px 0;
}
}
}
// 人员管理上下移动按钮样式
.el-button.is-disabled.el-button--text {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
// 人员管理角色管理菜单管理修改新增弹框样式
.PersonnelDialog {
.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -7px;
width: 29%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
.selbig {
width: 500px;
}
}
......
@import '~@/styles/sbElement-ui.scss';
@import "~@/styles/_handle.scss";
.from-clues {
height: 100%;
......@@ -9,7 +10,7 @@
&-header {
width: 100%;
padding: 15px;
padding: 10px 15px 10px 15px;
box-sizing: border-box;
background-size: 100% 100%;
background: #FFFFFF;
......@@ -96,7 +97,7 @@
.cx {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -104,7 +105,7 @@
.cx:hover {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -113,8 +114,7 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
......@@ -122,23 +122,17 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
.el-button:focus {
// background: none;
}
.cx:focus {
color: white;
background-color: #4162D8;
@include background_color("btnBg");
background-size: cover;
}
.cz:focus {
color: #4162D8;
background-color: white;
;
background-size: cover;
}
\ No newline at end of file
......
......@@ -9,7 +9,7 @@ $yellow:#FEC171;
$panGreen: #30B08F;
// header
$headerHeight: 74px;
$headerHeight: 72px;
// sidebar
$menuText:#ffffff;
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-21 13:42:13
* @LastEditTime: 2023-03-24 16:44:54
*/
import Vue from 'vue'
export default function getTheme (theme = Vue.prototype.BASE_API.THEME) {
const resultMap = {
'jg': function () {
import("@/styles/jgPublic.scss")
return import("@/styles/jgPublic.scss");
},
'sb': function () {
import("@/styles/sbPublic.scss")
return import("@/styles/sbPublic.scss");
},
default: function () {
'default': function () {
throw new Error(`Unsupported theme: ${theme}`);
},
};
const result = resultMap[theme]();
if (result instanceof Promise) {
return result;
} else {
return resultMap.default();
}
return resultMap[theme]() || resultMap.default()
}
}
\ No newline at end of file
......
......@@ -2,7 +2,7 @@
<div class="Cfdj from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,8 @@
<div class="dyaq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="150px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="fdcqdz from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="fdcqqfsyq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="fdcqyz from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="gzwsyq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="hysyq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="jsydzjdsyq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="lq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="tdsyq from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="110px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -2,7 +2,7 @@
<div class="from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -2,7 +2,7 @@
<div class="cancellationReg from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="105px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -22,7 +22,6 @@
</div>
</template>
<script>
import { getMenuInfo } from "@/api/user";
import { loginIn } from "@/api/login.js";
export default {
name: "jgLogin",
......
......@@ -108,10 +108,10 @@ export default {
if (valid) {
let res = await loginIn(self.user.account, self.user.password)
if (res.status == 1) {
let code = this.BASE_API.THEME == "sb" ? "BDCSBPT" : "BDCJGPT"
let code = this.BASE_API.CODE;
localStorage.setItem("token", `Bearer ${res.content}`);
const { result: getMenuData } = (await getMenuInfo(code)) || [];
let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path
let path1 = JSON.parse(getMenuData[1].metadata)?.path + '/' + JSON.parse(getMenuData[1].children[0].metadata)?.path
//登录成功后需判断有无重定向，没有重定向则跳转首页
const accessRoutes = await this.$store.dispatch(
"permission/generateRoutes",
......
<template>
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox entryJournal editDialogBox mainCenter"
:visible.sync="dialogVisible" width="90%">
<div slot="title" class="dialog_title" ref="dialogTitle">
{{ title || '登薄日志' }}
......@@ -458,119 +458,5 @@
}
</script>
<style scoped lang="scss">
// @import "~@/styles/mixin.scss";
// @import "~@/styles/dialogBox.scss";
/deep/.el-tabs__header {
margin: 0;
}
/deep/.el-dialog {
display: flex;
flex-direction: column;
}
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
height: 100%;
flex: 1;
position: relative;
}
.regularHeight {
display: flex;
flex-direction: column;
height: 87vh;
margin-bottom: 5px;
.editDialogBox-con,
.JsonEditor {
flex: 1;
}
}
.d-center {
}
.dialog_title {
top: -13px;
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-icon-circle-close {
display: none;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.from-clues-content {
margin-top: 0;
background: none;
padding: 0;
}
.editDialogBox-box {
position: relative;
top: 10px;
height: 100%;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
/deep/.el-input {
flex: 1;
width: 100%;
}
/deep/.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 14px;
color: #d7eaee;
margin: 3px 0;
}
}
</style>
......
......@@ -4,7 +4,7 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="80px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
......@@ -4,7 +4,7 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......
......@@ -3,7 +3,7 @@
<!-- 表单部分 -->
<div class="from-clues-header">
<el-form @submit.native.prevent :model="ruleForm" label-width="120px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row :gutter="20">
......
<!--
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-09 20:54:28
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-16 19:40:40
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-03-27 09:13:22
* @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -10,7 +10,7 @@
<div class="information from-clues">
<div class="from-clues-header">
<el-form ref="ruleForm" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......@@ -34,60 +34,64 @@
</div>
</template>
<script>
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
},
data () {
return {
isshow: true,
};
},
computed: {
userData () {
return this.$store.state.user.userInfo;
},
data () {
return {
isshow: true,
};
},
watch: {},
created () { },
mounted () { },
methods: {
information () {
this.isshow = true;
},
computed: {
userData () {
return this.$store.state.user.userInfo;
},
password () {
this.isshow = false;
},
watch: {},
created () { },
mounted () { },
methods: {
information () {
this.isshow = true;
},
password () {
this.isshow = false;
},
},
};
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.information {
@import "~@/styles/mixin.scss";
.information {
display: flex;
flex-direction: column;
.btnColRight {
margin-top: 10px;
display: flex;
flex-direction: column;
.btnColRight {
margin-top: 10px;
display: flex;
justify-content: center;
// background-color: cadetblue;
height: 30px;
}
/deep/.content {
.el-input__inner {
background: none;
}
.user-info {
background: none;
}
justify-content: center;
// background-color: cadetblue;
height: 30px;
}
/deep/.content {
.el-input__inner {
background: none;
}
.boxin {
flex: 1;
.user-info {
background: none;
}
}
</style>
.boxin {
flex: 1;
}
}</style>
......
<template>
<dialogBox class="modifydialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
<dialogBox class="modifydialog PersonnelDialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="form" :rules="rules">
......@@ -63,208 +63,208 @@
</template>
<script>
import { getParentMenuListAction } from '@/api/authorityManage'
import IconList from '../../../components/IconList'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
IconList,
},
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
watch: {
value (val) {
this.myValue = val
}
},
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
},
// 选择图标
getIconName (data) {
this.form.icon = data;
import { getParentMenuListAction } from '@/api/authorityManage'
import IconList from '../../../components/IconList'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
IconList,
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
watch: {
value (val) {
this.myValue = val
}
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
this.$message.error({ message: res.message, showClose: true })
}
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
})
},
// 选择图标
getIconName (data) {
this.form.icon = data;
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
}
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
},
close () {
this.resetForm()
this.$emit('input', false)
}
},
close () {
this.resetForm()
this.$emit('input', false)
}
}
}
</script>
<style scoped lang="scss">
.modifydialog {
&-con {
background: #031a46;
}
// .modifydialog {
// &-con {
// background: #031a46;
// }
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 28%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
// /deep/.el-dialog__header {
// .dialog_title {
// display: -webkit-box;
// display: -ms-flexbox;
// display: flex;
// position: relative;
// top: -8px;
// width: 28%;
// height: 40px;
// margin-left: 28px;
// -webkit-box-pack: center;
// -ms-flex-pack: center;
// justify-content: center;
// white-space: nowrap;
b {
font-size: 16px;
}
}
// b {
// font-size: 16px;
// }
// }
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
}
// .el-dialog__headerbtn {
// right: 20px !important;
// top: 23px !important;
// }
// }
// }
</style>
......
<!-- 新增 & 修改角色 -->
<template>
<dialogBox
class="modifydialog"
class="modifydialog PersonnelDialog"
:title="title"
:width="'567px'"
:isMain="true"
......@@ -160,29 +160,4 @@
}
</script>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 24%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
}
</style>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 10:27:32
*/
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
......@@ -17,7 +22,8 @@ class data extends filter {
},
{
prop: "cronExpression",
label: "cron表达式"
label: "cron表达式",
width: 160,
},
{
prop: "beanName",
......@@ -34,7 +40,7 @@ class data extends filter {
render: (h, scope) => {
return (
<div>
{ this.stateStatus(scope.row.jobStatus) }
{this.stateStatus(scope.row.jobStatus)}
</div>
)
},
......
......@@ -2,7 +2,7 @@
<div class="timedTask from-clues">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
......
<template>
<dialogBox :title="title" :width="'867px'" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
<dialogBox :title="title" :width="'867px'" class="modifydialog PersonnelDialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="form" :rules="rules">
......@@ -193,32 +193,4 @@
}
</script>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -7px;
width: 29%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
.selbig {
width: 500px;
}
}
</style>
......