Browse Source

fix: 按钮样式调整

feature/three
guoapeng 3 months ago
parent
commit
0488b290f7
  1. 6
      src/assets/styles/element.scss
  2. 8
      src/assets/styles/main.scss
  3. 16
      src/components/common/FTButton/index.vue
  4. 4
      src/layouts/default.vue
  5. 3
      src/main.ts
  6. 7
      vite.config.ts

6
src/assets/styles/element.scss

@ -1,10 +1,10 @@
:root {
--el-font-size-base: 50px;
--el-button-size: 80px;
--el-font-size-base: 14px;
--el-button-size: 30px;
--el-color-primary: #26509C;
--el-color-primary: #1989FA;
//--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
//--text-color-primary: #17213c;
//--el-color-success: rgba(88, 162, 95, 1);

8
src/assets/styles/main.scss

@ -1,7 +1,7 @@
$primary-color: #0a57ea;
$success-color: #67c23a;
$danger-color: #f56c6c;
$warn-color: #e6a23c;
$primary-color: #1989FA;
$success-color: #14A656;
$danger-color: #DF1515;
$warn-color: #EE8223;
$info-color: #909399;
@use './common.scss';

16
src/components/common/FTButton/index.vue

@ -79,12 +79,12 @@ defineExpose({
}
.my-button {
height: var(--el-button-size);
padding: 0 50px;
border-radius: 10px;
padding: 0 20px;
border-radius: 5px;
display: flex;
align-items: center;
cursor: pointer;
font-size: 40px;
font-size: 14px;
width: fit-content;
position: relative;
.el-icon {
@ -99,14 +99,14 @@ defineExpose({
opacity: 0.5;
}
.my-button-default {
background: linear-gradient(180deg, #D8E3F8 0%, #FBFCFE 100%);
color: #26509C;
border: 1px solid #D8E3F8;
background: #fff;
color: $primary-color;
border: 1px solid $primary-color;
}
.my-button-primary {
background: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
background: $primary-color;
color: #fff;
border: 1px solid #D8E3F8;
border: 1px solid $primary-color;
}
.my-button-info {

4
src/layouts/default.vue

@ -17,9 +17,7 @@ const router = useRouter()
</el-aside>
<el-container>
<el-main>
<div class="content">
<router-view />
</div>
<router-view class="content" />
</el-main>
</el-container>
</el-container>

3
src/main.ts

@ -1,4 +1,4 @@
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 引入 ElementPlusIconsVue
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import FtButton from 'components/common/FTButton/index.vue'
import FtDialog from 'components/common/FTDialog/index.vue'
import FtStream from 'components/common/FTStream/index.vue'
@ -10,7 +10,6 @@ import { createApp } from 'vue'
import App from './app.vue'
import router from './router'
import 'element-plus/dist/index.css'
import 'assets/styles/main.scss'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

7
vite.config.ts

@ -81,6 +81,13 @@ export default defineConfig({
'router': resolve(__dirname, 'src/router'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/styles/main.scss" as *;',
},
},
},
// 本地化配置
server: {
open: true,

Loading…
Cancel
Save