lizhi/slf-tc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修改样式

Browse Source
This commit is contained in:
lz-ui 2025-09-17 11:04:09 +08:00
parent d2a4940482
commit aaa6e169a0
22 changed files with 199 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -54,4 +54,4 @@ yarn dev
Copyright ©️2025 北京数维无穹科技有限公司
Copyright ©2025 北京数维无穹科技有限公司

BIN
src/assets/images/login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 653 KiB

2
src/assets/styles/index.scss
View File

@ -4,7 +4,7 @@
@use './sidebar.scss';
@use './btn.scss';
@use './ruoyi.scss';
@use './reset.scss';
body {
height: 100%;
margin: 0;

125
src/assets/styles/reset.scss Normal file
View File

@ -0,0 +1,125 @@
:root{
--app-header-height: 80px;
--app-nav-bj: #F4F8FF;
--el-text-color-primary: #1f2329;
}
#app .sidebar-container .el-menu,
#app .main-container{
background-color: var(--app-nav-bj) !important;
}
#app .app-main{
border-radius: 16px;
box-sizing: border-box;
background-color: #fff;
}
#app .sidebar-container .svg-icon{
margin-right: 8px;
}
/* flex */
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.flex-direction-column {
display: flex;
flex-direction: column;
}
.align-center {
align-items: center;
}
.align-baseline {
align-items: baseline;
}
.justify-center {
justify-content: center;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.vertical-middle {
vertical-align: middle;
}
.cursor {
cursor: pointer;
}
.mr-6{
margin-right: 6px;
}
.mb-20{
margin-bottom: 20px;
}
/* 重置tabs */
.res-el-tab {
--el-tabs-header-height: 60px;
height: 100%;
.el-tabs__nav-wrap:after {
height: 0 !important;
}
.el-tabs__active-bar {
height: 4px;
border-radius: 4px 4px 0 0;
}
}
/* 重置message */
.el-message-box{
padding: 24px;
--el-messagebox-font-size: 16px;
--el-messagebox-width: 475px;
.el-message-box__headerbtn{
right: 10px;
top: 15px;
.el-message-box__close {
font-size: 20px;
}
}
.el-message-box__header,
.el-message-box__btns{
padding: 0;
}
.el-message-box__content {
padding: 24px 0;
font-weight: 400;
}
.el-message-box__message{
color: var(--el-text-color-primary);
}
}

4
src/assets/styles/ruoyi.scss
View File

@ -78,7 +78,7 @@
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9 !important;
background-color: var(--app-nav-bj) !important;
color: #515a6e;
height: 40px !important;
font-size: 13px;
@ -151,7 +151,7 @@
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link {
cursor: pointer;
color: #409EFF;
color: #3067EF;
margin-left: 10px;
}

14
src/assets/styles/sidebar.scss
View File

@ -24,8 +24,12 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
// box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
background-color: var(--app-nav-bj) !important;
.sidebar-logo-container{
background-color: var(--app-nav-bj) !important;
}
// reset element-ui css
.horizontal-collapse-transition {
@ -84,7 +88,7 @@
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: var(--app-nav-bj) !important;
}
}
@ -97,7 +101,7 @@
min-width: vars.$base-sidebar-width !important;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: var(--app-nav-bj) !important;
}
}
@ -213,7 +217,7 @@
.el-menu-item {
&:hover {
// you can use $sub-menuHover
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: var(--app-nav-bj) !important;
}
}

6
src/assets/styles/variables.module.scss
View File

@ -10,7 +10,7 @@ $panGreen: #30B08F;
// 默认主题变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuActiveText: #3067EF;
$menuBg: #304156;
$menuHover: #263445;
@ -18,7 +18,7 @@ $menuHover: #263445;
$menuLightBg: #ffffff;
$menuLightHover: #f0f1f5;
$menuLightText: #303133;
$menuLightActiveText: #409EFF;
$menuLightActiveText: #3067EF;
// 基础变量
$base-sidebar-width: 200px;
@ -32,7 +32,7 @@ $base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
// 组件变量
$--color-primary: #409EFF;
$--color-primary: #3067EF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

12
src/layout/components/AppMain.vue
View File

@ -38,7 +38,7 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
min-height: calc(100vh - var(--app-header-height));
width: 100%;
position: relative;
overflow: hidden;
@ -47,7 +47,7 @@ function addIframe() {
.fixed-header + .app-main {
overflow-y: auto;
scrollbar-gutter: auto;
height: calc(100vh - 50px);
height: calc(100vh - var(--app-header-height));
min-height: 0px;
}
@ -56,18 +56,18 @@ function addIframe() {
}
.fixed-header + .app-main {
margin-top: 50px;
margin-top: var(--app-header-height);
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
min-height: calc(100vh - var(--app-header-height) - 34px);
}
.fixed-header + .app-main {
margin-top: 84px;
height: calc(100vh - 84px);
margin-top: var(--app-header-height) + 34px;
height: calc(100vh - var(--app-header-height) - 34px);
min-height: 0px;
}
}

17
src/layout/components/Navbar.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
<breadcrumb v-if="settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
@ -102,14 +102,14 @@ function toggleTheme() {
<style lang='scss' scoped>
.navbar {
height: 50px;
height: var(--app-header-height);
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
background: var(--app-nav-bj);
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
line-height: 60px;
height: 100%;
float: left;
cursor: pointer;
@ -117,7 +117,7 @@ function toggleTheme() {
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
background-color: var(--app-nav-bj);
}
}
@ -158,7 +158,7 @@ function toggleTheme() {
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
background-color: var(--app-nav-bj);
}
}
@ -181,7 +181,8 @@ function toggleTheme() {
padding-right: 0px;
.avatar-wrapper {
margin-top: 10px;
margin-top: 20px;
margin-right: 10px;
right: 8px;
position: relative;

2
src/layout/components/Settings/index.vue
View File

@ -106,7 +106,7 @@ const showSettings = ref(false)
const theme = ref(settingsStore.theme)
const sideTheme = ref(settingsStore.sideTheme)
const storeSettings = computed(() => settingsStore)
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
const predefineColors = ref(["#3067EF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
/** 是否需要topnav */
function topNavChange(val) {

4
src/layout/components/Sidebar/Logo.vue
View File

@ -59,8 +59,8 @@ const getLogoTextColor = computed(() => {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
height: 65px;
line-height: 65px;
background: v-bind(getLogoBackground);
text-align: center;
overflow: hidden;

2
src/layout/components/Sidebar/index.vue
View File

@ -91,7 +91,7 @@ const activeMenu = computed(() => {
color: v-bind(getMenuTextColor);
&.is-active {
color: var(--menu-active-text, #409eff);
color: var(--menu-active-text, #3067EF);
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
}
}

11
src/settings.js
View File

@ -12,17 +12,22 @@ export default {
/**
* 是否系统布局配置
*/
showSettings: true,
showSettings: false,
/**
* 是否显示顶部导航
*/
topNav: false,
/**
* 是否显示汉堡菜单
*/
showHamburger: true,
/**
* 是否显示 tagsView
*/
tagsView: true,
tagsView: false,
/**
* 显示页签图标
@ -32,7 +37,7 @@ export default {
/**
* 是否固定头部
*/
fixedHeader: false,
fixedHeader: true,
/**
* 是否显示logo

2
src/store/modules/settings.js
View File

@ -14,7 +14,7 @@ const useSettingsStore = defineStore(
{
state: () => ({
title: '',
theme: storageSetting.theme || '#409EFF',
theme: storageSetting.theme || '#3067EF',
sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings,
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

4
src/views/login.vue
View File

@ -59,7 +59,7 @@
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright ©️2025 北京数维无穹科技有限公司</span>
<span>Copyright ©2025 北京数维无穹科技有限公司</span>
</div>
</div>
</template>
@ -169,7 +169,7 @@ getCookie()
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url("../assets/images/login.png");
background-size: cover;
}
.title {

4
src/views/register.vue
View File

@ -70,7 +70,7 @@
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright ©️2025 北京数维无穹科技有限公司</span>
<span>Copyright ©2025 北京数维无穹科技有限公司</span>
</div>
</div>
</template>
@ -161,7 +161,7 @@ getCode()
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url("../assets/images/login.png");
background-size: cover;
}
.title {

12
src/views/tc/eventAnalysisReport/detail.vue
View File

@ -1,11 +1,19 @@
<template>
<div class="app-container" v-loading="loading">
<!--顶部-->
<div class="flex align-center mb-20">
<el-icon @click="proxy.$router.go(-1)" class="mr-6 cursor">
<ArrowLeftBold />
</el-icon>
{{ data && data.reportTime }}
</div>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>赛事分析 {{ data && data.reportTime }}</span>
<span>赛事分析 {{ data && data.matchCode }}</span>
</div>
</template>
<div class="body">
@ -24,6 +32,8 @@
import { reportDetail } from '@/api/tc/eventAnalysisReport'
const route = useRoute()
let { proxy } = getCurrentInstance()
const id = ref(0)
const data = ref({})
const loading = ref(false)

2
src/views/tc/eventAnalysisReport/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tabs v-model="activeName" class="res-el-tab" @tab-click="handleClick">
<el-tab-pane label="竞彩足球" name="soccer"><soccer /></el-tab-pane>
<el-tab-pane label="竞彩篮球" name="basketball"><basketball /></el-tab-pane>
</el-tabs>

11
src/views/tc/videoScript/detail.vue
View File

@ -1,11 +1,18 @@
<template>
<div class="app-container" v-loading="loading">
<!--顶部-->
<div class="flex align-center mb-20">
<el-icon @click="proxy.$router.go(-1)" class="mr-6 cursor">
<ArrowLeftBold />
</el-icon>
{{ data && data.scriptTime }}
</div>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>短视频脚本 {{ data && data.scriptTime }}</span>
<span>短视频脚本 {{ data && data.matchCode }}</span>
</div>
</template>
<div class="body">
@ -24,6 +31,8 @@
import { scriptDetail } from '@/api/tc/videoScript'
const route = useRoute()
let { proxy } = getCurrentInstance()
const id = ref(0)
const data = ref({})
const loading = ref(false)

2
src/views/tc/videoScript/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tabs v-model="activeName" class="res-el-tab" @tab-click="handleClick">
<el-tab-pane label="竞彩足球" name="soccer"><soccer /></el-tab-pane>
<el-tab-pane label="竞彩篮球" name="basketball"><basketball /></el-tab-pane>
</el-tabs>

4
src/views/tool/build/RightPanel.vue
View File

@ -844,7 +844,7 @@ function tagChange(tagIcon) {
}
.select-item.sortable-chosen {
border: 1px dashed #409eff;
border: 1px dashed #3067EF;
}
.select-line-icon {
@ -878,7 +878,7 @@ function tagChange(tagIcon) {
top: 0;
left: 0;
cursor: pointer;
background: #409eff;
background: #3067EF;
z-index: 1;
border-radius: 0 0 6px 0;
justify-content: center;

2
src/views/tool/build/index.vue
View File

@ -307,7 +307,7 @@ onMounted(() => {
</script>
<style lang='scss'>
$lighterBlue: #409EFF;
$lighterBlue: #3067EF;
.container {
position: relative;