Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f07e5bd0 1 parent b15b4da7

🎉 init: 项目初始化

Inline Side-by-side
Showing 35 changed files with 2624 additions and 0 deletions
1 +# port
2 +VITE_PORT = 8106
3 +
4 +# 反向代理服务器地址
5 +VITE_PROXY_TARGET = https://oa-dev.onwall.cn
6 +# VITE_PROXY_TARGET = https://oa.onwall.cn
7 +
8 +# API请求前缀
9 +VITE_PROXY_PREFIX = /srv/
10 +
11 +# 打包输出文件夹名称
12 +VITE_OUTDIR = hager
13 +
14 +# 是否开启调试
15 +VITE_CONSOLE = 0
16 +
17 +# appID相关
18 +VITE_APPID=微信appID
1 +# 资源公共路径
2 +VITE_BASE = /
3 +
4 +# 测试open-id
5 +# VITE_OPENID = api-test-openid
6 +# VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME
7 +VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA
8 +# VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U
9 +
10 +# B端账号
11 +VITE_ID = 13761653761
12 +
13 +# 验证码
14 +VITE_PIN =
1 +###
2 + # @Date: 2024-09-26 13:36:06
3 + # @LastEditors: hookehuyr hookehuyr@gmail.com
4 + # @LastEditTime: 2024-09-26 13:38:31
5 + # @FilePath: /hager/.env.production
6 + # @Description: 文件描述
7 +###
8 +# 资源公共路径
9 +VITE_BASE = /f/hager/
10 +
11 +# 测试open-id
12 +VITE_APP_OPENID =
13 +
14 +# B端账号
15 +VITE_APP_ID =
16 +
17 +# 验证码
18 +VITE_APP_PIN =
1 +# Logs
2 +logs
3 +*.log
4 +npm-debug.log*
5 +yarn-debug.log*
6 +yarn-error.log*
7 +pnpm-debug.log*
8 +lerna-debug.log*
9 +
10 +node_modules
11 +dist
12 +dist-ssr
13 +*.local
14 +
15 +# Editor directories and files
16 +.vscode/*
17 +!.vscode/extensions.json
18 +.idea
19 +.DS_Store
20 +*.suo
21 +*.ntvs*
22 +*.njsproj
23 +*.sln
24 +*.sw?
25 +
26 +.history
27 +.vscode
1 +海格电器自适应网页
......
1 +export function createProxy(prefix, target) {
2 + const ret = {};
3 + ret[prefix] = {
4 + target,
5 + changeOrigin: true,
6 + ws: true,
7 + // rewrite: (path) => path.replace(/^\/api/, '')
8 + // rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
9 + }
10 + return ret
11 +}
1 +<!doctype html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="UTF-8" />
5 + <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <title>Vite + Vue</title>
8 + </head>
9 + <body>
10 + <div id="app"></div>
11 + <script type="module" src="/src/main.js"></script>
12 + </body>
13 +</html>
1 +{
2 + "name": "hager-project",
3 + "private": true,
4 + "version": "0.0.0",
5 + "type": "module",
6 + "scripts": {
7 + "dev": "vite",
8 + "build": "vite build",
9 + "preview": "vite preview"
10 + },
11 + "dependencies": {
12 + "@babel/polyfill": "^7.12.1",
13 + "axios": "^1.7.5",
14 + "dayjs": "^1.11.13",
15 + "element-ui": "^2.15.14",
16 + "mui-player": "^1.8.1",
17 + "sass": "1.55.0",
18 + "vue": "2.7.13",
19 + "vue-router": "3.6.5"
20 + },
21 + "devDependencies": {
22 + "@vitejs/plugin-legacy": "^5.4.2",
23 + "@vitejs/plugin-vue": "^5.1.2",
24 + "@vitejs/plugin-vue2": "^2.3.1",
25 + "less": "^4.2.0",
26 + "path-browserify": "^1.0.1",
27 + "qs": "^6.13.0",
28 + "sass-embedded": "1.55.0",
29 + "vite": "^5.4.1",
30 + "vite-plugin-dynamic-import": "^1.5.0"
31 + }
32 +}
1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<template>
2 + <div>
3 + <router-view></router-view>
4 + </div>
5 +</template>
6 +
7 +<script setup>
8 +
9 +</script>
10 +
11 +<style lang="less" scoped>
12 +
13 +</style>
1 +import { fn, fetch, uploadFn } from '@/api/fn';
2 +
3 +const Api = {
4 + SMS: '/srv/?a=sms',
5 + TOKEN: '/srv/?a=upload',
6 + SAVE_FILE: '/srv/?a=upload&t=save_file',
7 +}
8 +
9 +/**
10 + * @description: 发送验证码
11 + * @param {*} phone 手机号码
12 + * @returns
13 + */
14 +export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));
15 +
16 +/**
17 + * @description: 获取七牛token
18 + * @param {*} filename 文件名
19 + * @param {*} file 图片base64
20 + * @returns
21 + */
22 +export const qiniuTokenAPI = (params) => fn(fetch.stringifyPost(Api.TOKEN, params));
23 +
24 +/**
25 + * @description: 上传七牛
26 + * @param {*}
27 + * @returns
28 + */
29 +export const qiniuUploadAPI = (url, data, config) => uploadFn(fetch.basePost(url, data, config));
30 +
31 +/**
32 + * @description: 保存图片
33 + * @param {*} format
34 + * @param {*} hash
35 + * @param {*} height
36 + * @param {*} width
37 + * @param {*} filekey
38 + * @returns
39 + */
40 +export const saveFileAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FILE, params));
1 +/*
2 + * @Date: 2024-08-26 13:51:57
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-08-26 13:57:27
5 + * @FilePath: /vite-project/src/api/fn.js
6 + * @Description: 文件描述
7 + */
8 +import axios from '@/utils/axios';
9 +import { Message } from 'element-ui';
10 +import qs from 'Qs'
11 +
12 +/**
13 + * 网络请求功能函数
14 + * @param {*} api 请求axios接口
15 + * @returns 请求成功后，获取数据
16 + */
17 +export const fn = (api) => {
18 + return api
19 + .then(res => {
20 + if (res.data.code === 1) {
21 + return res.data || true;
22 + } else {
23 + // tslint:disable-next-line: no-console
24 + console.warn(res);
25 + if (!res.data.show) return false;
26 + Message({
27 + message: res.data.msg,
28 + type: 'warning'
29 + });
30 + return false;
31 + }
32 + })
33 + .catch(err => {
34 + // tslint:disable-next-line: no-console
35 + console.error(err);
36 + return false;
37 + })
38 + .finally(() => { // 最终执行
39 + })
40 +}
41 +
42 +/**
43 + * 七牛返回格式
44 + * @param {*} api
45 + * @returns
46 + */
47 +export const uploadFn = (api) => {
48 + return api
49 + .then(res => {
50 + if (res.statusText === 'OK') {
51 + return res.data || true;
52 + } else {
53 + // tslint:disable-next-line: no-console
54 + console.warn(res);
55 + if (!res.data.show) return false;
56 + Toast({
57 + icon: 'close',
58 + message: res.data.msg
59 + });
60 + return false;
61 + }
62 + })
63 + .catch(err => {
64 + // tslint:disable-next-line: no-console
65 + console.error(err);
66 + return false;
67 + })
68 +}
69 +
70 +/**
71 + * 统一 GET/POST 不同传参形式
72 + */
73 +export const fetch = {
74 + get: function (api, params) {
75 + return axios.get(api, { params })
76 + },
77 + post: function (api, params) {
78 + return axios.post(api, params)
79 + },
80 + stringifyPost: function (api, params) {
81 + return axios.post(api, qs.stringify(params))
82 + },
83 + basePost: function (url, data, config) {
84 + return axios.post(url, data, config)
85 + }
86 +}
1 +import { fn, fetch } from '@/api/fn';
2 +
3 +const Api = {
4 + MAP: '/srv/?a=map',
5 +};
6 +
7 +export const mapAPI = (params) => fn(fetch.get(Api.MAP, params));
1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<!--
2 + * @Date: 2024-08-28 10:17:07
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-08-29 16:10:19
5 + * @FilePath: /vue2_vite_web/src/components/navbar.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="navbar-container">
10 + <div class="big-navbar" v-if="!isMobile"></div>
11 + <div class="small-navbar" v-else></div>
12 + </div>
13 +</template>
14 +
15 +<script setup>
16 +const isMobile = ref(window.innerWidth < 768)
17 +const updateWindowSize = () => {
18 + isMobile.value = window.innerWidth < 768
19 +}
20 +// 使用watch来监听窗口大小变化（也可以使用其他方式）
21 +watch(
22 + () => window.innerWidth,
23 + (newVal, oldVal) => {
24 + updateWindowSize()
25 + },
26 + { immediate: false },
27 +)
28 +onMounted(() => {
29 + window.addEventListener('resize', updateWindowSize)
30 +})
31 +onBeforeUnmount(() => {
32 + window.removeEventListener('resize', updateWindowSize)
33 +})
34 +</script>
35 +<style lang="scss" scoped>
36 +// 也可以使用媒体查询来设置一些样式
37 +@media (max-width: 768px) {
38 + .navbar {
39 + background: rgb(255, 255, 255);
40 + }
41 +}
42 +</style>
1 +<template>
2 + <div ref="animatedElement" :style="computedStyle">
3 + <slot></slot>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +// 页面滚动时，元素缓慢上升效果, 视觉差效果组件
9 +export default {
10 + name: 'slideIn',
11 + props: {
12 + duration: { // 动画持续时间
13 + type: Number,
14 + default: 1000
15 + },
16 + easing: { // 动画缓动效果
17 + type: String,
18 + default: 'ease'
19 + },
20 + distance: { // 动画距离
21 + type: Number,
22 + default: 100
23 + }
24 + },
25 + data() {
26 + return {
27 + hasAnimated: false // 是否已经动画过
28 + }
29 + },
30 + computed: {
31 + computedStyle() {
32 + return {
33 + opacity: this.hasAnimated ? 1 : 0,
34 + transform: this.hasAnimated ? 'translateY(0)' : `translateY(${this.distance}px)`,
35 + transition: `transform ${this.duration}ms ${this.easing}, opacity ${this.duration}ms ${this.easing}`
36 + }
37 + }
38 + },
39 + mounted() {
40 + if (typeof window !== 'undefined' && 'IntersectionObserver' in window) { // 检测是否支持IntersectionObserver
41 + this.createObserver() // 创建IntersectionObserver
42 + } else {
43 + // 如果不支持IntersectionObserver，则使用scroll事件来实现动画
44 + this.observeScroll()
45 + }
46 + },
47 + methods: {
48 + createObserver() {
49 + const observer = new IntersectionObserver(entries => { // IntersectionObserver回调函数
50 + entries.forEach(entry => { // 遍历每个观察目标
51 + if (entry.isIntersecting && !this.hasAnimated) { // 如果目标进入视口并且没有动画过
52 + this.hasAnimated = true // 标记动画过
53 + observer.unobserve(entry.target) // 停止观察
54 + }
55 + })
56 + }, { threshold: 0.1 }) // 观察阈值，表示目标在视口的百分比
57 + observer.observe(this.$refs.animatedElement) // 观察目标
58 + },
59 + observeScroll() {
60 + const onScroll = () => { // scroll事件回调函数
61 + if (this.isInViewport(this.$refs.animatedElement) && !this.hasAnimated) { // 如果目标在视口并且没有动画过
62 + this.hasAnimated = true // 标记动画过
63 + window.removeEventListener('scroll', onScroll) // 停止监听scroll事件
64 + }
65 + }
66 + window.addEventListener('scroll', onScroll) // 监听scroll事件
67 + },
68 + isInViewport(el) { // 判断目标是否在视口
69 + const rect = el.getBoundingClientRect()
70 + return rect.top < window.innerHeight && rect.bottom > 0
71 + }
72 + }
73 +}
74 +</script>
1 +<!--
2 + * @Date: 2024-09-24 18:06:55
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-25 09:59:56
5 + * @FilePath: /vue2_vite_web/src/components/videoPlayer.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="">
10 + <div id="mui-player">
11 + </div>
12 + <div v-if="status === 'play'" @click="play" style="position: absolute; top: 50%; left: 50%;">play</div>
13 + <div v-if="status === 'pause'" @click="pause" style="position: absolute; top: 50%; left: 50%;">pause</div>
14 + </div>
15 +</template>
16 +
17 +<script>
18 +import 'mui-player/dist/mui-player.min.css'
19 +import MuiPlayer from 'mui-player'
20 +
21 +export default {
22 + data () {
23 + return {
24 + video: null,
25 + status: 'play',
26 + }
27 + },
28 + mounted () {
29 + // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
30 + var mp = new MuiPlayer({
31 + container:'#mui-player',
32 + title: '',
33 + pageHead: false,
34 + src:'https://gd-pri.jinshujufiles.com/en/g7D0MT/ltkASOw4yq0lJI0b-VH00VNz7zCs_field_20_1657944201.MOV?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:iYFNizzrqTFRuDPzUdtWDSrUOtA=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9sdGtBU093NHlxMGxKSTBiLVZIMDBWTno3ekNzX2ZpZWxkXzIwXzE2NTc5NDQyMDEuTU9WKiIsIkUiOjE5NzM1MTM3NTh9',
35 + poster: 'https://gd-pri.jinshujufiles.com/en/g7D0MT/FqGDEvU9encwLEBGGj5y3_9fZ5VR_field_74_1657944218.jpeg?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:5dtH0Gbayh4jNtDMHK4o0D7X5Vs=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GcUdERXZVOWVuY3dMRUJHR2o1eTNfOWZaNVZSX2ZpZWxkXzc0XzE2NTc5NDQyMTguanBlZyoiLCJFIjoxOTczNTEzNzU4fQ==',
36 + videoAttribute: [
37 + // 声明启用同层播放, 不让会自动全屏播放
38 + { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
39 + { attrKey: 'playsinline', attrValue: 'playsinline' },
40 + { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
41 + ],
42 + });
43 + const video = mp.video();
44 + mp.on('ready',() => {
45 + this.video = video;
46 + });
47 + },
48 + methods: {
49 + play () {
50 + this.video.play();
51 + this.status = 'pause';
52 + },
53 + pause () {
54 + this.video.pause();
55 + this.status = 'play';
56 + }
57 + }
58 +}
59 +</script>
60 +
61 +<style lang="less" scoped>
62 +
63 +</style>
1 +/*
2 + * @Date: 2024-08-26 10:12:56
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-24 18:05:09
5 + * @FilePath: /vue2_vite_web/src/main.js
6 + * @Description: 文件描述
7 + */
8 +import "@babel/polyfill";
9 +import Vue from "vue";
10 +import App from './App.vue'
11 +import VueRouter from 'vue-router'
12 +import router from './router'
13 +import ElementUI from 'element-ui';
14 +import 'element-ui/lib/theme-chalk/index.css';
15 +import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，用于在某些条件下隐藏元素
16 +import '@/styles/element-ui/element-variables.scss' // 自定义主题, 不需要展示屏蔽
17 +
18 +Vue.use(VueRouter);
19 +Vue.use(ElementUI);
20 +
21 +new Vue({
22 + router,
23 + render: (h) => h(App),
24 +})
25 +.$mount("#app");
1 +/*
2 + * @Date: 2024-08-26 10:42:15
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-08-26 10:53:44
5 + * @FilePath: /vite-project/src/route.js
6 + * @Description: 文件描述
7 + */
8 +export default [{
9 + path: '/',
10 + name: '首页',
11 + component: () => import('@/views/index'),
12 + meta: {
13 + },
14 + children: []
15 +}]
1 +/*
2 + * @Date: 2024-08-26 10:42:15
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-08-26 10:46:21
5 + * @FilePath: /vite-project/src/router.js
6 + * @Description: 文件描述
7 + */
8 +import Vue from 'vue'
9 +import VueRouter from 'vue-router'
10 +import ConfigRouter from './route.js'
11 +
12 +Vue.use(VueRouter)
13 +
14 +const router = new VueRouter({
15 + history: false,
16 + hashbang: true,
17 + base: '/',
18 + routes: ConfigRouter
19 +})
20 +
21 +router.beforeEach((to, from, next) => {
22 + next()
23 +})
24 +
25 +router.afterEach((to, from, next) => {
26 + // store.commit('updateLoadingStatus', false)
27 +})
28 +
29 +export default router
1 +@import "../variables.scss";
2 +/* 改变主题色变量 */
3 +$--color-primary: $style-el--color-primary;
4 +$--color-white: $style-el--color-white;
5 +
6 +/* 改变 icon 字体路径变量，必需 */
7 +$--font-path: 'element-ui/lib/theme-chalk/fonts';
8 +@import "element-ui/packages/theme-chalk/src/index";
1 +/* Element Chalk Variables */
2 +
3 +/* Transition
4 +-------------------------- */
5 +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
6 +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
7 +$--fade-linear-transition: opacity 200ms linear !default;
8 +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
9 +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
10 +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
11 +
12 +/* Colors
13 +-------------------------- */
14 +$--color-white: #fff !default;
15 +$--color-black: #000 !default;
16 +
17 +$--color-primary: #262729 !default;
18 +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
19 +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
20 +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
21 +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
22 +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
23 +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
24 +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
25 +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
26 +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
27 +
28 +$--color-success: #409167 !default;
29 +$--color-warning: #9DA408 !default;
30 +$--color-danger: #B3450E !default;
31 +$--color-info: #0A76A4 !default;
32 +
33 +$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
34 +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
35 +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
36 +$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
37 +
38 +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
39 +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
40 +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
41 +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
42 +
43 +$--color-text-primary: #303133 !default;
44 +$--color-text-regular: #606266 !default;
45 +$--color-text-secondary: #909399 !default;
46 +$--color-text-placeholder: #c0c4cc !default;
47 +
48 +/* Link
49 +-------------------------- */
50 +$--link-color: $--color-primary-light-2 !default;
51 +$--link-hover-color: $--color-primary !default;
52 +
53 +/* Background
54 +-------------------------- */
55 +$--background-color-base: #f5f7fa !default;
56 +
57 +/* Border
58 +-------------------------- */
59 +$--border-width-base: 1px !default;
60 +$--border-style-base: solid !default;
61 +$--border-color-base: #dcdfe6 !default;
62 +$--border-color-light: #e4e7ed !default;
63 +$--border-color-lighter: #ebeef5 !default;
64 +$--border-color-extra-light: #f2f6fc !default;
65 +$--border-color-hover: $--color-text-placeholder !default;
66 +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
67 +$--border-radius-base: 4px !default;
68 +$--border-radius-small: 2px !default;
69 +$--border-radius-circle: 100% !default;
70 +
71 +/* Box-shadow
72 +-------------------------- */
73 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
74 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
75 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
76 +
77 +/* Fill
78 +-------------------------- */
79 +$--fill-base: $--color-white !default;
80 +
81 +/* Font
82 +-------------------------- */
83 +$--font-path: 'fonts' !default;
84 +$--font-size-base: 14px !default;
85 +$--font-size-small: 13px !default;
86 +$--font-size-large: 18px !default;
87 +$--font-color-disabled-base: #bbb !default;
88 +$--font-weight-primary: 500 !default;
89 +$--font-line-height-primary: 24px !default;
90 +
91 +/* Size
92 +-------------------------- */
93 +$--size-base: 14px !default;
94 +
95 +/* z-index
96 +-------------------------- */
97 +$--index-normal: 1 !default;
98 +$--index-top: 1000 !default;
99 +$--index-popper: 2000 !default;
100 +
101 +/* Disable base
102 +-------------------------- */
103 +$--disabled-fill-base: $--background-color-base !default;
104 +$--disabled-color-base: $--color-text-placeholder !default;
105 +$--disabled-border-base: $--border-color-light !default;
106 +
107 +/* Icon
108 +-------------------------- */
109 +$--icon-color: #666 !default;
110 +$--icon-color-base: $--color-info !default;
111 +
112 +/* Checkbox
113 +-------------------------- */
114 +$--checkbox-font-size: 14px !default;
115 +$--checkbox-font-weight: $--font-weight-primary !default;
116 +$--checkbox-color: $--color-text-regular !default;
117 +$--checkbox-input-height: 14px !default;
118 +$--checkbox-input-width: 14px !default;
119 +$--checkbox-input-border-radius: $--border-radius-small !default;
120 +$--checkbox-input-fill: $--color-white !default;
121 +$--checkbox-input-border: $--border-base !default;
122 +$--checkbox-input-border-color: $--border-color-base !default;
123 +$--checkbox-icon-color: $--color-white !default;
124 +
125 +$--checkbox-disabled-input-border-color: $--border-color-base !default;
126 +$--checkbox-disabled-input-fill: #edf2fc !default;
127 +$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
128 +
129 +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
130 +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
131 +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
132 +
133 +$--checkbox-checked-text-color: $--color-primary !default;
134 +$--checkbox-checked-input-border-color: $--color-primary !default;
135 +$--checkbox-checked-input-fill: $--color-primary !default;
136 +$--checkbox-checked-icon-color: $--fill-base !default;
137 +
138 +$--checkbox-input-border-color-hover: $--color-primary !default;
139 +
140 +$--checkbox-bordered-height: 40px !default;
141 +$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
142 +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
143 +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
144 +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
145 +$--checkbox-bordered-medium-input-height: 14px !default;
146 +$--checkbox-bordered-medium-input-width: 14px !default;
147 +$--checkbox-bordered-medium-height: 36px !default;
148 +$--checkbox-bordered-small-input-height: 12px !default;
149 +$--checkbox-bordered-small-input-width: 12px !default;
150 +$--checkbox-bordered-small-height: 32px !default;
151 +$--checkbox-bordered-mini-input-height: 12px !default;
152 +$--checkbox-bordered-mini-input-width: 12px !default;
153 +$--checkbox-bordered-mini-height: 28px !default;
154 +
155 +$--checkbox-button-font-size: $--font-size-base !default;
156 +$--checkbox-button-checked-fill: $--color-primary !default;
157 +$--checkbox-button-checked-color: $--color-white !default;
158 +$--checkbox-button-checked-border-color: $--color-primary !default;
159 +
160 +
161 +
162 +/* Radio
163 +-------------------------- */
164 +$--radio-font-size: 14px !default;
165 +$--radio-font-weight: $--font-weight-primary !default;
166 +$--radio-color: $--color-text-regular !default;
167 +$--radio-input-height: 14px !default;
168 +$--radio-input-width: 14px !default;
169 +$--radio-input-border-radius: $--border-radius-circle !default;
170 +$--radio-input-fill: $--color-white !default;
171 +$--radio-input-border: $--border-base !default;
172 +$--radio-input-border-color: $--border-color-base !default;
173 +$--radio-icon-color: $--color-white !default;
174 +
175 +$--radio-disabled-input-border-color: $--disabled-border-base !default;
176 +$--radio-disabled-input-fill: $--disabled-fill-base !default;
177 +$--radio-disabled-icon-color: $--disabled-fill-base !default;
178 +
179 +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
180 +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
181 +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
182 +
183 +$--radio-checked-text-color: $--color-primary !default;
184 +$--radio-checked-input-border-color: $--color-primary !default;
185 +$--radio-checked-input-fill: $--color-white !default;
186 +$--radio-checked-icon-color: $--color-primary !default;
187 +
188 +$--radio-input-border-color-hover: $--color-primary !default;
189 +
190 +$--radio-bordered-height: 40px !default;
191 +$--radio-bordered-padding: 12px 20px 0 10px !default;
192 +$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
193 +$--radio-bordered-small-padding: 8px 15px 0 10px !default;
194 +$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
195 +$--radio-bordered-medium-input-height: 14px !default;
196 +$--radio-bordered-medium-input-width: 14px !default;
197 +$--radio-bordered-medium-height: 36px !default;
198 +$--radio-bordered-small-input-height: 12px !default;
199 +$--radio-bordered-small-input-width: 12px !default;
200 +$--radio-bordered-small-height: 32px !default;
201 +$--radio-bordered-mini-input-height: 12px !default;
202 +$--radio-bordered-mini-input-width: 12px !default;
203 +$--radio-bordered-mini-height: 28px !default;
204 +
205 +$--radio-button-font-size: $--font-size-base !default;
206 +$--radio-button-checked-fill: $--color-primary !default;
207 +$--radio-button-checked-color: $--color-white !default;
208 +$--radio-button-checked-border-color: $--color-primary !default;
209 +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
210 +
211 +/* Select
212 +-------------------------- */
213 +$--select-border-color-hover: $--border-color-hover !default;
214 +$--select-disabled-border: $--disabled-border-base !default;
215 +$--select-font-size: $--font-size-base !default;
216 +$--select-close-hover-color: $--color-text-secondary !default;
217 +
218 +$--select-input-color: $--color-text-placeholder !default;
219 +$--select-multiple-input-color: #666 !default;
220 +$--select-input-focus-background: $--color-primary !default;
221 +$--select-input-font-size: 14px !default;
222 +
223 +$--select-option-color: $--color-text-regular !default;
224 +$--select-option-disabled-color: $--color-text-placeholder !default;
225 +$--select-option-disabled-background: $--color-white !default;
226 +$--select-option-height: 34px !default;
227 +$--select-option-hover-background: $--background-color-base !default;
228 +$--select-option-selected: $--color-primary !default;
229 +$--select-option-selected-hover: $--background-color-base !default;
230 +
231 +$--select-group-color: $--color-info !default;
232 +$--select-group-height: 30px !default;
233 +$--select-group-font-size: 12px !default;
234 +
235 +$--select-dropdown-background: $--color-white !default;
236 +$--select-dropdown-shadow: $--box-shadow-light !default;
237 +$--select-dropdown-empty-color: #999 !default;
238 +$--select-dropdown-max-height: 274px !default;
239 +$--select-dropdown-padding: 6px 0 !default;
240 +$--select-dropdown-empty-padding: 10px 0 !default;
241 +$--select-dropdown-border: solid 1px $--border-color-light !default;
242 +
243 +/* Alert
244 +-------------------------- */
245 +$--alert-padding: 8px 16px !default;
246 +$--alert-border-radius: $--border-radius-base !default;
247 +$--alert-title-font-size: 13px !default;
248 +$--alert-description-font-size: 12px !default;
249 +$--alert-close-font-size: 12px !default;
250 +$--alert-close-customed-font-size: 13px !default;
251 +
252 +$--alert-success-color: $--color-success-lighter !default;
253 +$--alert-info-color: $--color-info-lighter !default;
254 +$--alert-warning-color: $--color-warning-lighter !default;
255 +$--alert-danger-color: $--color-danger-lighter !default;
256 +
257 +$--alert-icon-size: 16px !default;
258 +$--alert-icon-large-size: 28px !default;
259 +
260 +/* Message Box
261 +-------------------------- */
262 +$--msgbox-width: 420px !default;
263 +$--msgbox-border-radius: 4px !default;
264 +$--msgbox-font-size: $--font-size-large !default;
265 +$--msgbox-content-font-size: $--font-size-base !default;
266 +$--msgbox-content-color: $--color-text-regular !default;
267 +$--msgbox-error-font-size: 12px !default;
268 +$--msgbox-padding-primary: 15px !default;
269 +
270 +$--msgbox-success-color: $--color-success !default;
271 +$--msgbox-info-color: $--color-info !default;
272 +$--msgbox-warning-color: $--color-warning !default;
273 +$--msgbox-danger-color: $--color-danger !default;
274 +
275 +/* Message
276 +-------------------------- */
277 +$--message-shadow: $--box-shadow-base !default;
278 +$--message-min-width: 380px !default;
279 +$--message-background-color: #edf2fc !default;
280 +$--message-padding: 15px 15px 15px 20px !default;
281 +$--message-content-color: $--color-text-regular !default;
282 +$--message-close-color: $--color-text-placeholder !default;
283 +$--message-close-size: 16px !default;
284 +$--message-close-hover-color: $--color-text-secondary !default;
285 +
286 +$--message-success-color: $--color-success !default;
287 +$--message-info-color: $--color-info !default;
288 +$--message-warning-color: $--color-warning !default;
289 +$--message-danger-color: $--color-danger !default;
290 +
291 +/* Notification
292 +-------------------------- */
293 +$--notification-width: 330px !default;
294 +$--notification-padding: 14px 26px 14px 13px !default;
295 +$--notification-radius: 8px !default;
296 +$--notification-shadow: $--box-shadow-light !default;
297 +$--notification-border-color: $--border-color-lighter !default;
298 +$--notification-icon-size: 24px !default;
299 +$--notification-close-font-size: $--message-close-size !default;
300 +$--notification-group-margin: 13px !default;
301 +$--notification-font-size: $--font-size-base !default;
302 +$--notification-color: $--color-text-regular !default;
303 +$--notification-title-font-size: 16px !default;
304 +$--notification-title-color: $--color-text-primary !default;
305 +
306 +$--notification-close-color: $--color-text-secondary !default;
307 +$--notification-close-hover-color: $--color-text-regular !default;
308 +
309 +$--notification-success-color: $--color-success !default;
310 +$--notification-info-color: $--color-info !default;
311 +$--notification-warning-color: $--color-warning !default;
312 +$--notification-danger-color: $--color-danger !default;
313 +
314 +/* Input
315 +-------------------------- */
316 +$--input-font-size: $--font-size-base !default;
317 +$--input-color: $--color-text-regular !default;
318 +$--input-width: 140px !default;
319 +$--input-height: 40px !default;
320 +$--input-border: $--border-base !default;
321 +$--input-border-color: $--border-color-base !default;
322 +$--input-border-radius: $--border-radius-base !default;
323 +$--input-border-color-hover: $--border-color-hover !default;
324 +$--input-fill: $--color-white !default;
325 +$--input-fill-disabled: $--disabled-fill-base !default;
326 +$--input-color-disabled: $--font-color-disabled-base !default;
327 +$--input-icon-color: $--color-text-placeholder !default;
328 +$--input-placeholder-color: $--color-text-placeholder !default;
329 +$--input-max-width: 314px !default;
330 +
331 +$--input-hover-border: $--border-color-hover !default;
332 +$--input-clear-hover-color: $--color-text-secondary !default;
333 +
334 +$--input-focus-border: $--color-primary !default;
335 +$--input-focus-fill: $--color-white !default;
336 +
337 +$--input-disabled-fill: $--disabled-fill-base !default;
338 +$--input-disabled-border: $--disabled-border-base !default;
339 +$--input-disabled-color: $--disabled-color-base !default;
340 +$--input-disabled-placeholder-color: $--color-text-placeholder !default;
341 +
342 +$--input-medium-font-size: 14px !default;
343 +$--input-medium-height: 36px !default;
344 +
345 +$--input-small-font-size: 13px !default;
346 +$--input-small-height: 32px !default;
347 +
348 +$--input-mini-font-size: 12px !default;
349 +$--input-mini-height: 28px !default;
350 +
351 +/* Cascader
352 +-------------------------- */
353 +$--cascader-menu-fill: $--fill-base !default;
354 +$--cascader-menu-font-size: $--font-size-base !default;
355 +$--cascader-menu-radius: $--border-radius-base !default;
356 +$--cascader-menu-border: $--border-base !default;
357 +$--cascader-menu-border-color: $--border-color-base !default;
358 +$--cascader-menu-border-width: $--border-width-base !default;
359 +$--cascader-menu-color: $--color-text-regular !default;
360 +$--cascader-menu-option-color-active: $--color-text-secondary !default;
361 +$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
362 +$--cascader-menu-option-color-hover: $--color-text-regular !default;
363 +$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
364 +$--cascader-menu-option-color-disabled: #999 !default;
365 +$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
366 +$--cascader-menu-option-empty-color: #666 !default;
367 +$--cascader-menu-group-color: #999 !default;
368 +$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
369 +$--cascader-menu-option-pinyin-color: #999 !default;
370 +$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
371 +
372 +/* Group
373 +-------------------------- */
374 +$--group-option-flex: 0 0 (1/5) * 100% !default;
375 +$--group-option-offset-bottom: 12px !default;
376 +$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
377 +$--group-title-color: $--color-black !default;
378 +$--group-title-font-size: $--font-size-base !default;
379 +$--group-title-width: 66px !default;
380 +
381 +/* Tab
382 +-------------------------- */
383 +$--tab-font-size: $--font-size-base !default;
384 +$--tab-border-line: 1px solid #e4e4e4 !default;
385 +$--tab-header-color-active: $--color-text-secondary !default;
386 +$--tab-header-color-hover: $--color-text-regular !default;
387 +$--tab-header-color: $--color-text-regular !default;
388 +$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
389 +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
390 +$--tab-vertical-header-width: 90px !default;
391 +$--tab-vertical-header-count-color: $--color-white !default;
392 +$--tab-vertical-header-count-fill: $--color-text-secondary !default;
393 +
394 +/* Button
395 +-------------------------- */
396 +$--button-font-size: 14px !default;
397 +$--button-font-weight: $--font-weight-primary !default;
398 +$--button-border-radius: $--border-radius-base !default;
399 +$--button-padding-vertical: 12px !default;
400 +$--button-padding-horizontal: 20px !default;
401 +
402 +$--button-medium-font-size: 14px !default;
403 +$--button-medium-border-radius: $--border-radius-base !default;
404 +$--button-medium-padding-vertical: 10px !default;
405 +$--button-medium-padding-horizontal: 20px !default;
406 +
407 +$--button-small-font-size: 12px !default;
408 +$--button-small-border-radius: #{$--border-radius-base - 1} !default;
409 +$--button-small-padding-vertical: 9px !default;
410 +$--button-small-padding-horizontal: 15px !default;
411 +
412 +$--button-mini-font-size: 12px !default;
413 +$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
414 +$--button-mini-padding-vertical: 7px !default;
415 +$--button-mini-padding-horizontal: 15px !default;
416 +
417 +$--button-default-color: $--color-text-regular !default;
418 +$--button-default-fill: $--color-white !default;
419 +$--button-default-border: $--border-color-base !default;
420 +
421 +$--button-disabled-color: $--color-text-placeholder !default;
422 +$--button-disabled-fill: $--color-white !default;
423 +$--button-disabled-border: $--border-color-lighter !default;
424 +
425 +$--button-primary-border: $--color-primary !default;
426 +$--button-primary-color: $--color-white !default;
427 +$--button-primary-fill: $--color-primary !default;
428 +
429 +$--button-success-border: $--color-success !default;
430 +$--button-success-color: $--color-white !default;
431 +$--button-success-fill: $--color-success !default;
432 +
433 +$--button-warning-border: $--color-warning !default;
434 +$--button-warning-color: $--color-white !default;
435 +$--button-warning-fill: $--color-warning !default;
436 +
437 +$--button-danger-border: $--color-danger !default;
438 +$--button-danger-color: $--color-white !default;
439 +$--button-danger-fill: $--color-danger !default;
440 +
441 +$--button-info-border: $--color-info !default;
442 +$--button-info-color: $--color-white !default;
443 +$--button-info-fill: $--color-info !default;
444 +
445 +$--button-hover-tint-percent: 20% !default;
446 +$--button-active-shade-percent: 10% !default;
447 +
448 +
449 +/* cascader
450 +-------------------------- */
451 +$--cascader-height: 200px !default;
452 +
453 +/* Switch
454 +-------------------------- */
455 +$--switch-on-color: $--color-primary !default;
456 +$--switch-off-color: $--border-color-base !default;
457 +$--switch-disabled-color: $--border-color-lighter !default;
458 +$--switch-disabled-text-color: $--color-text-placeholder !default;
459 +
460 +$--switch-font-size: $--font-size-base !default;
461 +$--switch-core-border-radius: 10px !default;
462 +$--switch-width: 40px !default;
463 +$--switch-height: 20px !default;
464 +$--switch-button-size: 16px !default;
465 +
466 +/* Dialog
467 +-------------------------- */
468 +$--dialog-background-color: $--color-primary-light-4 !default;
469 +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
470 +$--dialog-close-hover-color: $--color-primary !default;
471 +$--dialog-title-font-size: $--font-size-large !default;
472 +$--dialog-font-size: 14px !default;
473 +$--dialog-line-height: $--font-line-height-primary !default;
474 +$--dialog-padding-primary: 20px !default;
475 +
476 +/* Table
477 +-------------------------- */
478 +$--table-border-color: $--border-color-lighter !default;
479 +$--table-border: 1px solid $--table-border-color !default;
480 +$--table-text-color: $--color-text-regular !default;
481 +$--table-header-color: $--color-text-secondary !default;
482 +$--table-row-hover-background: $--background-color-base !default;
483 +$--table-current-row-background: $--color-primary-light-9 !default;
484 +$--table-header-background: $--color-white !default;
485 +$--table-footer-background: $--color-text-placeholder !default;
486 +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
487 +
488 +/* Pagination
489 +-------------------------- */
490 +$--pagination-font-size: 13px !default;
491 +$--pagination-fill: $--color-white !default;
492 +$--pagination-color: $--color-text-primary !default;
493 +$--pagination-border-radius: 3px !default;
494 +$--pagination-button-color: $--color-text-primary !default;
495 +$--pagination-button-width: 35.5px !default;
496 +$--pagination-button-height: 28px !default;
497 +$--pagination-button-disabled-color: $--color-text-placeholder !default;
498 +$--pagination-button-disabled-fill: $--color-white !default;
499 +$--pagination-hover-fill: $--color-primary !default;
500 +$--pagination-hover-color: $--color-white !default;
501 +
502 +/* Popover
503 +-------------------------- */
504 +$--popover-fill: $--color-white !default;
505 +$--popover-font-size: $--font-size-base !default;
506 +$--popover-border-color: $--border-color-lighter !default;
507 +$--popover-arrow-size: 6px !default;
508 +$--popover-padding: 12px !default;
509 +$--popover-padding-large: 18px 20px !default;
510 +$--popover-title-font-size: 16px !default;
511 +$--popover-title-color: $--color-text-primary !default;
512 +
513 +/* Tooltip
514 +-------------------------- */
515 +$--tooltip-fill: $--color-text-primary !default;
516 +$--tooltip-color: $--color-white !default;
517 +$--tooltip-font-size: 12px !default;
518 +$--tooltip-border-color: $--color-text-primary !default;
519 +$--tooltip-arrow-size: 6px !default;
520 +$--tooltip-padding: 10px !default;
521 +
522 +/* Tag
523 +-------------------------- */
524 +$--tag-padding: 0 10px !default;
525 +$--tag-fill: rgba($--color-primary, 0.10) !default;
526 +$--tag-color: $--color-primary !default;
527 +$--tag-border: rgba($--color-primary, 0.20) !default;
528 +$--tag-font-size: 12px !default;
529 +$--tag-border-radius: 4px !default;
530 +
531 +$--tag-info-fill: rgba($--color-info, 0.10) !default;
532 +$--tag-info-border: rgba($--color-info, 0.20) !default;
533 +$--tag-info-color: $--color-info !default;
534 +
535 +$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
536 +$--tag-primary-border: rgba($--color-primary, 0.20) !default;
537 +$--tag-primary-color: $--color-primary !default;
538 +
539 +$--tag-success-fill: rgba($--color-success, 0.10) !default;
540 +$--tag-success-border: rgba($--color-success, 0.20) !default;
541 +$--tag-success-color: $--color-success !default;
542 +
543 +$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
544 +$--tag-warning-border: rgba($--color-warning, 0.20) !default;
545 +$--tag-warning-color: $--color-warning !default;
546 +
547 +$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
548 +$--tag-danger-border: rgba($--color-danger, 0.20) !default;
549 +$--tag-danger-color: $--color-danger !default;
550 +
551 +/* Tree
552 +-------------------------- */
553 +$--tree-node-hover-color: $--background-color-base !default;
554 +$--tree-text-color: $--color-text-regular !default;
555 +$--tree-expand-icon-color: $--color-text-placeholder !default;
556 +
557 +/* Dropdown
558 +-------------------------- */
559 +$--dropdown-menu-box-shadow: $--box-shadow-light !default;
560 +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
561 +$--dropdown-menuItem-hover-color: $--link-color !default;
562 +
563 +/* Badge
564 +-------------------------- */
565 +$--badge-fill: $--color-danger !default;
566 +$--badge-radius: 10px !default;
567 +$--badge-font-size: 12px !default;
568 +$--badge-padding: 6px !default;
569 +$--badge-size: 18px !default;
570 +
571 +/* Card
572 +--------------------------*/
573 +$--card-border-color: $--border-color-lighter !default;
574 +$--card-border-radius: 4px !default;
575 +$--card-padding: 20px !default;
576 +
577 +/* Slider
578 +--------------------------*/
579 +$--slider-main-background-color: $--color-primary !default;
580 +$--slider-runway-background-color: $--border-color-light !default;
581 +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
582 +$--slider-stop-background-color: $--color-white !default;
583 +$--slider-disable-color: $--color-text-placeholder !default;
584 +
585 +$--slider-margin: 16px 0 !default;
586 +$--slider-border-radius: 3px !default;
587 +$--slider-height: 6px !default;
588 +$--slider-button-size: 16px !default;
589 +$--slider-button-wrapper-size: 36px !default;
590 +$--slider-button-wrapper-offset: -15px !default;
591 +
592 +/* Steps
593 +--------------------------*/
594 +$--steps-border-color: $--disabled-border-base !default;
595 +$--steps-border-radius: 4px !default;
596 +$--steps-padding: 20px !default;
597 +
598 +/* Menu
599 +--------------------------*/
600 +$--menu-item-font-size: $--font-size-base !default;
601 +$--menu-item-color: $--color-text-primary !default;
602 +$--menu-item-fill: $--color-white !default;
603 +$--menu-item-hover-fill: $--color-primary-light-9 !default;
604 +
605 +/* Rate
606 +--------------------------*/
607 +$--rate-height: 20px !default;
608 +$--rate-font-size: $--font-size-base !default;
609 +$--rate-icon-size: 18px !default;
610 +$--rate-icon-margin: 6px !default;
611 +$--rate-icon-color: $--color-text-placeholder !default;
612 +
613 +/* DatePicker
614 +--------------------------*/
615 +$--datepicker-color: $--color-text-regular !default;
616 +$--datepicker-off-color: $--color-text-placeholder !default;
617 +$--datepicker-header-color: $--color-text-regular !default;
618 +$--datepicker-icon-color: $--color-text-primary !default;
619 +$--datepicker-border-color: $--disabled-border-base !default;
620 +$--datepicker-inner-border-color: #e4e4e4 !default;
621 +$--datepicker-inrange-color: $--border-color-extra-light !default;
622 +$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
623 +$--datepicker-active-color: $--color-primary !default;
624 +$--datepicker-text-hover-color: $--color-primary !default;
625 +$--datepicker-cell-hover-color: #fff !default;
626 +
627 +/* Loading
628 +--------------------------*/
629 +$--loading-spinner-size: 42px !default;
630 +$--loading-fullscreen-spinner-size: 50px !default;
631 +
632 +/* Scrollbar
633 +--------------------------*/
634 +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
635 +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
636 +
637 +/* Carousel
638 +--------------------------*/
639 +$--carousel-arrow-font-size: 12px !default;
640 +$--carousel-arrow-size: 36px !default;
641 +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
642 +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
643 +$--carousel-indicator-width: 30px !default;
644 +$--carousel-indicator-height: 2px !default;
645 +$--carousel-indicator-padding-horizontal: 4px !default;
646 +$--carousel-indicator-padding-vertical: 12px !default;
647 +$--carousel-indicator-out-color: $--border-color-hover !default;
648 +
649 +/* Collapse
650 +--------------------------*/
651 +$--collapse-border-color: $--border-color-lighter !default;
652 +$--collapse-header-height: 48px !default;
653 +$--collapse-header-padding: 20px !default;
654 +$--collapse-header-fill: $--color-white !default;
655 +$--collapse-header-color: $--color-text-primary !default;
656 +$--collapse-header-size: 13px !default;
657 +$--collapse-content-fill: $--color-white !default;
658 +$--collapse-content-size: 13px !default;
659 +$--collapse-content-color: $--color-text-primary !default;
660 +
661 +/* Transfer
662 +--------------------------*/
663 +$--transfer-border-color: $--border-color-lighter !default;
664 +$--transfer-border-radius: $--border-radius-base !default;
665 +$--transfer-panel-width: 200px !default;
666 +$--transfer-panel-header-height: 40px !default;
667 +$--transfer-panel-header-background: $--background-color-base !default;
668 +$--transfer-panel-footer-height: 40px !default;
669 +$--transfer-panel-body-height: 246px !default;
670 +$--transfer-item-height: 30px !default;
671 +$--transfer-item-hover-background: $--color-text-secondary !default;
672 +$--transfer-filter-height: 32px !default;
673 +
674 +/* Header
675 + --------------------------*/
676 +$--header-padding: 0 20px !default;
677 +
678 +/* Footer
679 +--------------------------*/
680 +$--footer-padding: 0 20px !default;
681 +
682 +/* Main
683 +--------------------------*/
684 +$--main-padding: 20px !default;
685 +
686 +/* Break-point
687 +--------------------------*/
688 +$--sm: 768px !default;
689 +$--md: 992px !default;
690 +$--lg: 1200px !default;
691 +$--xl: 1920px !default;
692 +
693 +$--breakpoints: (
694 + 'xs' : (max-width: $--sm - 1),
695 + 'sm' : (min-width: $--sm),
696 + 'md' : (min-width: $--md),
697 + 'lg' : (min-width: $--lg),
698 + 'xl' : (min-width: $--xl)
699 +);
700 +
701 +$--breakpoints-spec: (
702 + 'xs-only' : (max-width: $--sm - 1),
703 + 'sm-and-up' : (min-width: $--sm),
704 + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
705 + 'sm-and-down': (max-width: $--md - 1),
706 + 'md-and-up' : (min-width: $--md),
707 + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
708 + 'md-and-down': (max-width: $--lg - 1),
709 + 'lg-and-up' : (min-width: $--lg),
710 + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
711 + 'lg-and-down': (max-width: $--xl - 1),
712 + 'xl-only' : (min-width: $--xl),
713 +);
714 +
715 +/* 改变 icon 字体路径变量，必需 */
716 +$--font-path: 'element-ui/lib/theme-chalk/fonts';
717 +@import "element-ui/packages/theme-chalk/src/index";
1 +/*需要切换的颜色变量*/
2 +$style-el--color-demo: transparent;
3 +$style-el--color-demo1:red;
4 +
5 +/* element颜色值声明
6 +* 统一前缀 $style-el
7 +* 后接element中变量值
8 +*/
9 +$style-el--color-primary: #C2915F;
10 +$style-el--color-white: #ffffff;
11 +
12 +/*定义方法*/
13 +@mixin color_primary() {
14 +
15 + /*判断匹配*/
16 + [data-theme="theme0"] & {
17 + background-color: $style-el--color-demo;
18 + }
19 +
20 + [data-theme="theme1"] & {
21 + background-color: $style-el--color-demo1;
22 + }
23 +}
24 +
25 +// tab组件
26 +@mixin tabs_color() {
27 + [data-theme="theme0"] & {
28 + color: #fff;
29 + text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
30 + }
31 +}
32 +
33 +// dialog组件
34 +@mixin dialog_color() {
35 + [data-theme="theme0"] & {
36 + background: linear-gradient(218deg, #0c386b 0%, #051934 100%);
37 + color: #fff;
38 + }
39 +}
1 +/* Element Chalk Variables */
2 +
3 +/* Transition
4 +-------------------------- */
5 +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
6 +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
7 +$--fade-linear-transition: opacity 200ms linear !default;
8 +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
9 +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
10 +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
11 +
12 +/* Colors
13 +-------------------------- */
14 +$--color-white: #fff !default;
15 +$--color-black: #000 !default;
16 +
17 +$--color-primary: #262729 !default;
18 +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
19 +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
20 +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
21 +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
22 +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
23 +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
24 +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
25 +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
26 +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
27 +
28 +$--color-success: #409167 !default;
29 +$--color-warning: #9DA408 !default;
30 +$--color-danger: #B3450E !default;
31 +$--color-info: #0A76A4 !default;
32 +
33 +$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
34 +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
35 +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
36 +$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
37 +
38 +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
39 +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
40 +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
41 +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
42 +
43 +$--color-text-primary: #303133 !default;
44 +$--color-text-regular: #606266 !default;
45 +$--color-text-secondary: #909399 !default;
46 +$--color-text-placeholder: #c0c4cc !default;
47 +
48 +/* Link
49 +-------------------------- */
50 +$--link-color: $--color-primary-light-2 !default;
51 +$--link-hover-color: $--color-primary !default;
52 +
53 +/* Background
54 +-------------------------- */
55 +$--background-color-base: #f5f7fa !default;
56 +
57 +/* Border
58 +-------------------------- */
59 +$--border-width-base: 1px !default;
60 +$--border-style-base: solid !default;
61 +$--border-color-base: #dcdfe6 !default;
62 +$--border-color-light: #e4e7ed !default;
63 +$--border-color-lighter: #ebeef5 !default;
64 +$--border-color-extra-light: #f2f6fc !default;
65 +$--border-color-hover: $--color-text-placeholder !default;
66 +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
67 +$--border-radius-base: 4px !default;
68 +$--border-radius-small: 2px !default;
69 +$--border-radius-circle: 100% !default;
70 +
71 +/* Box-shadow
72 +-------------------------- */
73 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
74 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
75 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
76 +
77 +/* Fill
78 +-------------------------- */
79 +$--fill-base: $--color-white !default;
80 +
81 +/* Font
82 +-------------------------- */
83 +$--font-path: 'fonts' !default;
84 +$--font-size-base: 14px !default;
85 +$--font-size-small: 13px !default;
86 +$--font-size-large: 18px !default;
87 +$--font-color-disabled-base: #bbb !default;
88 +$--font-weight-primary: 500 !default;
89 +$--font-line-height-primary: 24px !default;
90 +
91 +/* Size
92 +-------------------------- */
93 +$--size-base: 14px !default;
94 +
95 +/* z-index
96 +-------------------------- */
97 +$--index-normal: 1 !default;
98 +$--index-top: 1000 !default;
99 +$--index-popper: 2000 !default;
100 +
101 +/* Disable base
102 +-------------------------- */
103 +$--disabled-fill-base: $--background-color-base !default;
104 +$--disabled-color-base: $--color-text-placeholder !default;
105 +$--disabled-border-base: $--border-color-light !default;
106 +
107 +/* Icon
108 +-------------------------- */
109 +$--icon-color: #666 !default;
110 +$--icon-color-base: $--color-info !default;
111 +
112 +/* Checkbox
113 +-------------------------- */
114 +$--checkbox-font-size: 14px !default;
115 +$--checkbox-font-weight: $--font-weight-primary !default;
116 +$--checkbox-color: $--color-text-regular !default;
117 +$--checkbox-input-height: 14px !default;
118 +$--checkbox-input-width: 14px !default;
119 +$--checkbox-input-border-radius: $--border-radius-small !default;
120 +$--checkbox-input-fill: $--color-white !default;
121 +$--checkbox-input-border: $--border-base !default;
122 +$--checkbox-input-border-color: $--border-color-base !default;
123 +$--checkbox-icon-color: $--color-white !default;
124 +
125 +$--checkbox-disabled-input-border-color: $--border-color-base !default;
126 +$--checkbox-disabled-input-fill: #edf2fc !default;
127 +$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
128 +
129 +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
130 +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
131 +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
132 +
133 +$--checkbox-checked-text-color: $--color-primary !default;
134 +$--checkbox-checked-input-border-color: $--color-primary !default;
135 +$--checkbox-checked-input-fill: $--color-primary !default;
136 +$--checkbox-checked-icon-color: $--fill-base !default;
137 +
138 +$--checkbox-input-border-color-hover: $--color-primary !default;
139 +
140 +$--checkbox-bordered-height: 40px !default;
141 +$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
142 +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
143 +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
144 +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
145 +$--checkbox-bordered-medium-input-height: 14px !default;
146 +$--checkbox-bordered-medium-input-width: 14px !default;
147 +$--checkbox-bordered-medium-height: 36px !default;
148 +$--checkbox-bordered-small-input-height: 12px !default;
149 +$--checkbox-bordered-small-input-width: 12px !default;
150 +$--checkbox-bordered-small-height: 32px !default;
151 +$--checkbox-bordered-mini-input-height: 12px !default;
152 +$--checkbox-bordered-mini-input-width: 12px !default;
153 +$--checkbox-bordered-mini-height: 28px !default;
154 +
155 +$--checkbox-button-font-size: $--font-size-base !default;
156 +$--checkbox-button-checked-fill: $--color-primary !default;
157 +$--checkbox-button-checked-color: $--color-white !default;
158 +$--checkbox-button-checked-border-color: $--color-primary !default;
159 +
160 +
161 +
162 +/* Radio
163 +-------------------------- */
164 +$--radio-font-size: 14px !default;
165 +$--radio-font-weight: $--font-weight-primary !default;
166 +$--radio-color: $--color-text-regular !default;
167 +$--radio-input-height: 14px !default;
168 +$--radio-input-width: 14px !default;
169 +$--radio-input-border-radius: $--border-radius-circle !default;
170 +$--radio-input-fill: $--color-white !default;
171 +$--radio-input-border: $--border-base !default;
172 +$--radio-input-border-color: $--border-color-base !default;
173 +$--radio-icon-color: $--color-white !default;
174 +
175 +$--radio-disabled-input-border-color: $--disabled-border-base !default;
176 +$--radio-disabled-input-fill: $--disabled-fill-base !default;
177 +$--radio-disabled-icon-color: $--disabled-fill-base !default;
178 +
179 +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
180 +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
181 +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
182 +
183 +$--radio-checked-text-color: $--color-primary !default;
184 +$--radio-checked-input-border-color: $--color-primary !default;
185 +$--radio-checked-input-fill: $--color-white !default;
186 +$--radio-checked-icon-color: $--color-primary !default;
187 +
188 +$--radio-input-border-color-hover: $--color-primary !default;
189 +
190 +$--radio-bordered-height: 40px !default;
191 +$--radio-bordered-padding: 12px 20px 0 10px !default;
192 +$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
193 +$--radio-bordered-small-padding: 8px 15px 0 10px !default;
194 +$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
195 +$--radio-bordered-medium-input-height: 14px !default;
196 +$--radio-bordered-medium-input-width: 14px !default;
197 +$--radio-bordered-medium-height: 36px !default;
198 +$--radio-bordered-small-input-height: 12px !default;
199 +$--radio-bordered-small-input-width: 12px !default;
200 +$--radio-bordered-small-height: 32px !default;
201 +$--radio-bordered-mini-input-height: 12px !default;
202 +$--radio-bordered-mini-input-width: 12px !default;
203 +$--radio-bordered-mini-height: 28px !default;
204 +
205 +$--radio-button-font-size: $--font-size-base !default;
206 +$--radio-button-checked-fill: $--color-primary !default;
207 +$--radio-button-checked-color: $--color-white !default;
208 +$--radio-button-checked-border-color: $--color-primary !default;
209 +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
210 +
211 +/* Select
212 +-------------------------- */
213 +$--select-border-color-hover: $--border-color-hover !default;
214 +$--select-disabled-border: $--disabled-border-base !default;
215 +$--select-font-size: $--font-size-base !default;
216 +$--select-close-hover-color: $--color-text-secondary !default;
217 +
218 +$--select-input-color: $--color-text-placeholder !default;
219 +$--select-multiple-input-color: #666 !default;
220 +$--select-input-focus-background: $--color-primary !default;
221 +$--select-input-font-size: 14px !default;
222 +
223 +$--select-option-color: $--color-text-regular !default;
224 +$--select-option-disabled-color: $--color-text-placeholder !default;
225 +$--select-option-disabled-background: $--color-white !default;
226 +$--select-option-height: 34px !default;
227 +$--select-option-hover-background: $--background-color-base !default;
228 +$--select-option-selected: $--color-primary !default;
229 +$--select-option-selected-hover: $--background-color-base !default;
230 +
231 +$--select-group-color: $--color-info !default;
232 +$--select-group-height: 30px !default;
233 +$--select-group-font-size: 12px !default;
234 +
235 +$--select-dropdown-background: $--color-white !default;
236 +$--select-dropdown-shadow: $--box-shadow-light !default;
237 +$--select-dropdown-empty-color: #999 !default;
238 +$--select-dropdown-max-height: 274px !default;
239 +$--select-dropdown-padding: 6px 0 !default;
240 +$--select-dropdown-empty-padding: 10px 0 !default;
241 +$--select-dropdown-border: solid 1px $--border-color-light !default;
242 +
243 +/* Alert
244 +-------------------------- */
245 +$--alert-padding: 8px 16px !default;
246 +$--alert-border-radius: $--border-radius-base !default;
247 +$--alert-title-font-size: 13px !default;
248 +$--alert-description-font-size: 12px !default;
249 +$--alert-close-font-size: 12px !default;
250 +$--alert-close-customed-font-size: 13px !default;
251 +
252 +$--alert-success-color: $--color-success-lighter !default;
253 +$--alert-info-color: $--color-info-lighter !default;
254 +$--alert-warning-color: $--color-warning-lighter !default;
255 +$--alert-danger-color: $--color-danger-lighter !default;
256 +
257 +$--alert-icon-size: 16px !default;
258 +$--alert-icon-large-size: 28px !default;
259 +
260 +/* Message Box
261 +-------------------------- */
262 +$--msgbox-width: 420px !default;
263 +$--msgbox-border-radius: 4px !default;
264 +$--msgbox-font-size: $--font-size-large !default;
265 +$--msgbox-content-font-size: $--font-size-base !default;
266 +$--msgbox-content-color: $--color-text-regular !default;
267 +$--msgbox-error-font-size: 12px !default;
268 +$--msgbox-padding-primary: 15px !default;
269 +
270 +$--msgbox-success-color: $--color-success !default;
271 +$--msgbox-info-color: $--color-info !default;
272 +$--msgbox-warning-color: $--color-warning !default;
273 +$--msgbox-danger-color: $--color-danger !default;
274 +
275 +/* Message
276 +-------------------------- */
277 +$--message-shadow: $--box-shadow-base !default;
278 +$--message-min-width: 380px !default;
279 +$--message-background-color: #edf2fc !default;
280 +$--message-padding: 15px 15px 15px 20px !default;
281 +$--message-content-color: $--color-text-regular !default;
282 +$--message-close-color: $--color-text-placeholder !default;
283 +$--message-close-size: 16px !default;
284 +$--message-close-hover-color: $--color-text-secondary !default;
285 +
286 +$--message-success-color: $--color-success !default;
287 +$--message-info-color: $--color-info !default;
288 +$--message-warning-color: $--color-warning !default;
289 +$--message-danger-color: $--color-danger !default;
290 +
291 +/* Notification
292 +-------------------------- */
293 +$--notification-width: 330px !default;
294 +$--notification-padding: 14px 26px 14px 13px !default;
295 +$--notification-radius: 8px !default;
296 +$--notification-shadow: $--box-shadow-light !default;
297 +$--notification-border-color: $--border-color-lighter !default;
298 +$--notification-icon-size: 24px !default;
299 +$--notification-close-font-size: $--message-close-size !default;
300 +$--notification-group-margin: 13px !default;
301 +$--notification-font-size: $--font-size-base !default;
302 +$--notification-color: $--color-text-regular !default;
303 +$--notification-title-font-size: 16px !default;
304 +$--notification-title-color: $--color-text-primary !default;
305 +
306 +$--notification-close-color: $--color-text-secondary !default;
307 +$--notification-close-hover-color: $--color-text-regular !default;
308 +
309 +$--notification-success-color: $--color-success !default;
310 +$--notification-info-color: $--color-info !default;
311 +$--notification-warning-color: $--color-warning !default;
312 +$--notification-danger-color: $--color-danger !default;
313 +
314 +/* Input
315 +-------------------------- */
316 +$--input-font-size: $--font-size-base !default;
317 +$--input-color: $--color-text-regular !default;
318 +$--input-width: 140px !default;
319 +$--input-height: 40px !default;
320 +$--input-border: $--border-base !default;
321 +$--input-border-color: $--border-color-base !default;
322 +$--input-border-radius: $--border-radius-base !default;
323 +$--input-border-color-hover: $--border-color-hover !default;
324 +$--input-fill: $--color-white !default;
325 +$--input-fill-disabled: $--disabled-fill-base !default;
326 +$--input-color-disabled: $--font-color-disabled-base !default;
327 +$--input-icon-color: $--color-text-placeholder !default;
328 +$--input-placeholder-color: $--color-text-placeholder !default;
329 +$--input-max-width: 314px !default;
330 +
331 +$--input-hover-border: $--border-color-hover !default;
332 +$--input-clear-hover-color: $--color-text-secondary !default;
333 +
334 +$--input-focus-border: $--color-primary !default;
335 +$--input-focus-fill: $--color-white !default;
336 +
337 +$--input-disabled-fill: $--disabled-fill-base !default;
338 +$--input-disabled-border: $--disabled-border-base !default;
339 +$--input-disabled-color: $--disabled-color-base !default;
340 +$--input-disabled-placeholder-color: $--color-text-placeholder !default;
341 +
342 +$--input-medium-font-size: 14px !default;
343 +$--input-medium-height: 36px !default;
344 +
345 +$--input-small-font-size: 13px !default;
346 +$--input-small-height: 32px !default;
347 +
348 +$--input-mini-font-size: 12px !default;
349 +$--input-mini-height: 28px !default;
350 +
351 +/* Cascader
352 +-------------------------- */
353 +$--cascader-menu-fill: $--fill-base !default;
354 +$--cascader-menu-font-size: $--font-size-base !default;
355 +$--cascader-menu-radius: $--border-radius-base !default;
356 +$--cascader-menu-border: $--border-base !default;
357 +$--cascader-menu-border-color: $--border-color-base !default;
358 +$--cascader-menu-border-width: $--border-width-base !default;
359 +$--cascader-menu-color: $--color-text-regular !default;
360 +$--cascader-menu-option-color-active: $--color-text-secondary !default;
361 +$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
362 +$--cascader-menu-option-color-hover: $--color-text-regular !default;
363 +$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
364 +$--cascader-menu-option-color-disabled: #999 !default;
365 +$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
366 +$--cascader-menu-option-empty-color: #666 !default;
367 +$--cascader-menu-group-color: #999 !default;
368 +$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
369 +$--cascader-menu-option-pinyin-color: #999 !default;
370 +$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
371 +
372 +/* Group
373 +-------------------------- */
374 +$--group-option-flex: 0 0 (1/5) * 100% !default;
375 +$--group-option-offset-bottom: 12px !default;
376 +$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
377 +$--group-title-color: $--color-black !default;
378 +$--group-title-font-size: $--font-size-base !default;
379 +$--group-title-width: 66px !default;
380 +
381 +/* Tab
382 +-------------------------- */
383 +$--tab-font-size: $--font-size-base !default;
384 +$--tab-border-line: 1px solid #e4e4e4 !default;
385 +$--tab-header-color-active: $--color-text-secondary !default;
386 +$--tab-header-color-hover: $--color-text-regular !default;
387 +$--tab-header-color: $--color-text-regular !default;
388 +$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
389 +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
390 +$--tab-vertical-header-width: 90px !default;
391 +$--tab-vertical-header-count-color: $--color-white !default;
392 +$--tab-vertical-header-count-fill: $--color-text-secondary !default;
393 +
394 +/* Button
395 +-------------------------- */
396 +$--button-font-size: 14px !default;
397 +$--button-font-weight: $--font-weight-primary !default;
398 +$--button-border-radius: $--border-radius-base !default;
399 +$--button-padding-vertical: 12px !default;
400 +$--button-padding-horizontal: 20px !default;
401 +
402 +$--button-medium-font-size: 14px !default;
403 +$--button-medium-border-radius: $--border-radius-base !default;
404 +$--button-medium-padding-vertical: 10px !default;
405 +$--button-medium-padding-horizontal: 20px !default;
406 +
407 +$--button-small-font-size: 12px !default;
408 +$--button-small-border-radius: #{$--border-radius-base - 1} !default;
409 +$--button-small-padding-vertical: 9px !default;
410 +$--button-small-padding-horizontal: 15px !default;
411 +
412 +$--button-mini-font-size: 12px !default;
413 +$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
414 +$--button-mini-padding-vertical: 7px !default;
415 +$--button-mini-padding-horizontal: 15px !default;
416 +
417 +$--button-default-color: $--color-text-regular !default;
418 +$--button-default-fill: $--color-white !default;
419 +$--button-default-border: $--border-color-base !default;
420 +
421 +$--button-disabled-color: $--color-text-placeholder !default;
422 +$--button-disabled-fill: $--color-white !default;
423 +$--button-disabled-border: $--border-color-lighter !default;
424 +
425 +$--button-primary-border: $--color-primary !default;
426 +$--button-primary-color: $--color-white !default;
427 +$--button-primary-fill: $--color-primary !default;
428 +
429 +$--button-success-border: $--color-success !default;
430 +$--button-success-color: $--color-white !default;
431 +$--button-success-fill: $--color-success !default;
432 +
433 +$--button-warning-border: $--color-warning !default;
434 +$--button-warning-color: $--color-white !default;
435 +$--button-warning-fill: $--color-warning !default;
436 +
437 +$--button-danger-border: $--color-danger !default;
438 +$--button-danger-color: $--color-white !default;
439 +$--button-danger-fill: $--color-danger !default;
440 +
441 +$--button-info-border: $--color-info !default;
442 +$--button-info-color: $--color-white !default;
443 +$--button-info-fill: $--color-info !default;
444 +
445 +$--button-hover-tint-percent: 20% !default;
446 +$--button-active-shade-percent: 10% !default;
447 +
448 +
449 +/* cascader
450 +-------------------------- */
451 +$--cascader-height: 200px !default;
452 +
453 +/* Switch
454 +-------------------------- */
455 +$--switch-on-color: $--color-primary !default;
456 +$--switch-off-color: $--border-color-base !default;
457 +$--switch-disabled-color: $--border-color-lighter !default;
458 +$--switch-disabled-text-color: $--color-text-placeholder !default;
459 +
460 +$--switch-font-size: $--font-size-base !default;
461 +$--switch-core-border-radius: 10px !default;
462 +$--switch-width: 40px !default;
463 +$--switch-height: 20px !default;
464 +$--switch-button-size: 16px !default;
465 +
466 +/* Dialog
467 +-------------------------- */
468 +$--dialog-background-color: $--color-primary-light-4 !default;
469 +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
470 +$--dialog-close-hover-color: $--color-primary !default;
471 +$--dialog-title-font-size: $--font-size-large !default;
472 +$--dialog-font-size: 14px !default;
473 +$--dialog-line-height: $--font-line-height-primary !default;
474 +$--dialog-padding-primary: 20px !default;
475 +
476 +/* Table
477 +-------------------------- */
478 +$--table-border-color: $--border-color-lighter !default;
479 +$--table-border: 1px solid $--table-border-color !default;
480 +$--table-text-color: $--color-text-regular !default;
481 +$--table-header-color: $--color-text-secondary !default;
482 +$--table-row-hover-background: $--background-color-base !default;
483 +$--table-current-row-background: $--color-primary-light-9 !default;
484 +$--table-header-background: $--color-white !default;
485 +$--table-footer-background: $--color-text-placeholder !default;
486 +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
487 +
488 +/* Pagination
489 +-------------------------- */
490 +$--pagination-font-size: 13px !default;
491 +$--pagination-fill: $--color-white !default;
492 +$--pagination-color: $--color-text-primary !default;
493 +$--pagination-border-radius: 3px !default;
494 +$--pagination-button-color: $--color-text-primary !default;
495 +$--pagination-button-width: 35.5px !default;
496 +$--pagination-button-height: 28px !default;
497 +$--pagination-button-disabled-color: $--color-text-placeholder !default;
498 +$--pagination-button-disabled-fill: $--color-white !default;
499 +$--pagination-hover-fill: $--color-primary !default;
500 +$--pagination-hover-color: $--color-white !default;
501 +
502 +/* Popover
503 +-------------------------- */
504 +$--popover-fill: $--color-white !default;
505 +$--popover-font-size: $--font-size-base !default;
506 +$--popover-border-color: $--border-color-lighter !default;
507 +$--popover-arrow-size: 6px !default;
508 +$--popover-padding: 12px !default;
509 +$--popover-padding-large: 18px 20px !default;
510 +$--popover-title-font-size: 16px !default;
511 +$--popover-title-color: $--color-text-primary !default;
512 +
513 +/* Tooltip
514 +-------------------------- */
515 +$--tooltip-fill: $--color-text-primary !default;
516 +$--tooltip-color: $--color-white !default;
517 +$--tooltip-font-size: 12px !default;
518 +$--tooltip-border-color: $--color-text-primary !default;
519 +$--tooltip-arrow-size: 6px !default;
520 +$--tooltip-padding: 10px !default;
521 +
522 +/* Tag
523 +-------------------------- */
524 +$--tag-padding: 0 10px !default;
525 +$--tag-fill: rgba($--color-primary, 0.10) !default;
526 +$--tag-color: $--color-primary !default;
527 +$--tag-border: rgba($--color-primary, 0.20) !default;
528 +$--tag-font-size: 12px !default;
529 +$--tag-border-radius: 4px !default;
530 +
531 +$--tag-info-fill: rgba($--color-info, 0.10) !default;
532 +$--tag-info-border: rgba($--color-info, 0.20) !default;
533 +$--tag-info-color: $--color-info !default;
534 +
535 +$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
536 +$--tag-primary-border: rgba($--color-primary, 0.20) !default;
537 +$--tag-primary-color: $--color-primary !default;
538 +
539 +$--tag-success-fill: rgba($--color-success, 0.10) !default;
540 +$--tag-success-border: rgba($--color-success, 0.20) !default;
541 +$--tag-success-color: $--color-success !default;
542 +
543 +$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
544 +$--tag-warning-border: rgba($--color-warning, 0.20) !default;
545 +$--tag-warning-color: $--color-warning !default;
546 +
547 +$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
548 +$--tag-danger-border: rgba($--color-danger, 0.20) !default;
549 +$--tag-danger-color: $--color-danger !default;
550 +
551 +/* Tree
552 +-------------------------- */
553 +$--tree-node-hover-color: $--background-color-base !default;
554 +$--tree-text-color: $--color-text-regular !default;
555 +$--tree-expand-icon-color: $--color-text-placeholder !default;
556 +
557 +/* Dropdown
558 +-------------------------- */
559 +$--dropdown-menu-box-shadow: $--box-shadow-light !default;
560 +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
561 +$--dropdown-menuItem-hover-color: $--link-color !default;
562 +
563 +/* Badge
564 +-------------------------- */
565 +$--badge-fill: $--color-danger !default;
566 +$--badge-radius: 10px !default;
567 +$--badge-font-size: 12px !default;
568 +$--badge-padding: 6px !default;
569 +$--badge-size: 18px !default;
570 +
571 +/* Card
572 +--------------------------*/
573 +$--card-border-color: $--border-color-lighter !default;
574 +$--card-border-radius: 4px !default;
575 +$--card-padding: 20px !default;
576 +
577 +/* Slider
578 +--------------------------*/
579 +$--slider-main-background-color: $--color-primary !default;
580 +$--slider-runway-background-color: $--border-color-light !default;
581 +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
582 +$--slider-stop-background-color: $--color-white !default;
583 +$--slider-disable-color: $--color-text-placeholder !default;
584 +
585 +$--slider-margin: 16px 0 !default;
586 +$--slider-border-radius: 3px !default;
587 +$--slider-height: 6px !default;
588 +$--slider-button-size: 16px !default;
589 +$--slider-button-wrapper-size: 36px !default;
590 +$--slider-button-wrapper-offset: -15px !default;
591 +
592 +/* Steps
593 +--------------------------*/
594 +$--steps-border-color: $--disabled-border-base !default;
595 +$--steps-border-radius: 4px !default;
596 +$--steps-padding: 20px !default;
597 +
598 +/* Menu
599 +--------------------------*/
600 +$--menu-item-font-size: $--font-size-base !default;
601 +$--menu-item-color: $--color-text-primary !default;
602 +$--menu-item-fill: $--color-white !default;
603 +$--menu-item-hover-fill: $--color-primary-light-9 !default;
604 +
605 +/* Rate
606 +--------------------------*/
607 +$--rate-height: 20px !default;
608 +$--rate-font-size: $--font-size-base !default;
609 +$--rate-icon-size: 18px !default;
610 +$--rate-icon-margin: 6px !default;
611 +$--rate-icon-color: $--color-text-placeholder !default;
612 +
613 +/* DatePicker
614 +--------------------------*/
615 +$--datepicker-color: $--color-text-regular !default;
616 +$--datepicker-off-color: $--color-text-placeholder !default;
617 +$--datepicker-header-color: $--color-text-regular !default;
618 +$--datepicker-icon-color: $--color-text-primary !default;
619 +$--datepicker-border-color: $--disabled-border-base !default;
620 +$--datepicker-inner-border-color: #e4e4e4 !default;
621 +$--datepicker-inrange-color: $--border-color-extra-light !default;
622 +$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
623 +$--datepicker-active-color: $--color-primary !default;
624 +$--datepicker-text-hover-color: $--color-primary !default;
625 +$--datepicker-cell-hover-color: #fff !default;
626 +
627 +/* Loading
628 +--------------------------*/
629 +$--loading-spinner-size: 42px !default;
630 +$--loading-fullscreen-spinner-size: 50px !default;
631 +
632 +/* Scrollbar
633 +--------------------------*/
634 +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
635 +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
636 +
637 +/* Carousel
638 +--------------------------*/
639 +$--carousel-arrow-font-size: 12px !default;
640 +$--carousel-arrow-size: 36px !default;
641 +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
642 +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
643 +$--carousel-indicator-width: 30px !default;
644 +$--carousel-indicator-height: 2px !default;
645 +$--carousel-indicator-padding-horizontal: 4px !default;
646 +$--carousel-indicator-padding-vertical: 12px !default;
647 +$--carousel-indicator-out-color: $--border-color-hover !default;
648 +
649 +/* Collapse
650 +--------------------------*/
651 +$--collapse-border-color: $--border-color-lighter !default;
652 +$--collapse-header-height: 48px !default;
653 +$--collapse-header-padding: 20px !default;
654 +$--collapse-header-fill: $--color-white !default;
655 +$--collapse-header-color: $--color-text-primary !default;
656 +$--collapse-header-size: 13px !default;
657 +$--collapse-content-fill: $--color-white !default;
658 +$--collapse-content-size: 13px !default;
659 +$--collapse-content-color: $--color-text-primary !default;
660 +
661 +/* Transfer
662 +--------------------------*/
663 +$--transfer-border-color: $--border-color-lighter !default;
664 +$--transfer-border-radius: $--border-radius-base !default;
665 +$--transfer-panel-width: 200px !default;
666 +$--transfer-panel-header-height: 40px !default;
667 +$--transfer-panel-header-background: $--background-color-base !default;
668 +$--transfer-panel-footer-height: 40px !default;
669 +$--transfer-panel-body-height: 246px !default;
670 +$--transfer-item-height: 30px !default;
671 +$--transfer-item-hover-background: $--color-text-secondary !default;
672 +$--transfer-filter-height: 32px !default;
673 +
674 +/* Header
675 + --------------------------*/
676 +$--header-padding: 0 20px !default;
677 +
678 +/* Footer
679 +--------------------------*/
680 +$--footer-padding: 0 20px !default;
681 +
682 +/* Main
683 +--------------------------*/
684 +$--main-padding: 20px !default;
685 +
686 +/* Break-point
687 +--------------------------*/
688 +$--sm: 768px !default;
689 +$--md: 992px !default;
690 +$--lg: 1200px !default;
691 +$--xl: 1920px !default;
692 +
693 +$--breakpoints: (
694 + 'xs' : (max-width: $--sm - 1),
695 + 'sm' : (min-width: $--sm),
696 + 'md' : (min-width: $--md),
697 + 'lg' : (min-width: $--lg),
698 + 'xl' : (min-width: $--xl)
699 +);
700 +
701 +$--breakpoints-spec: (
702 + 'xs-only' : (max-width: $--sm - 1),
703 + 'sm-and-up' : (min-width: $--sm),
704 + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
705 + 'sm-and-down': (max-width: $--md - 1),
706 + 'md-and-up' : (min-width: $--md),
707 + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
708 + 'md-and-down': (max-width: $--lg - 1),
709 + 'lg-and-up' : (min-width: $--lg),
710 + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
711 + 'lg-and-down': (max-width: $--xl - 1),
712 + 'xl-only' : (min-width: $--xl),
713 +);
File mode changed
1 +/*
2 + * @Date: 2022-06-20 01:22:50
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-06-20 01:23:18
5 + * @FilePath: /tswj/src/composables/useMonitorKeyboard.js
6 + * @Description: 文件描述
7 + */
8 +/**
9 + * @class 监听虚拟键盘
10 + * @classdesc 监听虚拟键盘弹出隐藏
11 + * @public onEnd 结束监听虚拟键盘
12 + * @public onShow 传递一个回调 监听虚拟键盘弹出
13 + * @public onHidden 传递一个回调 监听虚拟键盘隐藏
14 + */
15 +class MonitorKeyboard {
16 + constructor() {
17 + this.type = this.IsIA();
18 + this.originalHeight = window.innerHeight;
19 + }
20 +
21 + /**
22 + * @function IsIA 获取设备类型
23 + * @param 1 Android 2 iOS
24 + */
25 + IsIA = () => {
26 + const userAgent = typeof window === 'object' ? window.navigator.userAgent : '';
27 + if (/android/i.test(userAgent)) {
28 + return 1;
29 + } else if (/iPhone|iPod|iPad/i.test(userAgent)) {
30 + return 2;
31 + }
32 + }
33 +
34 + // Android系统
35 + onResize = () => {
36 + //键盘弹起与隐藏都会引起窗口的高度发生变化
37 + const resizeHeight = window.innerHeight;
38 +
39 + if (this.originalHeight - resizeHeight > 50) {
40 + this.show('Android系统: 软键盘弹出');
41 + } else {
42 + this.hidden('Android系统: 软键盘收起');
43 + }
44 + }
45 +
46 + // iOS获取焦点
47 + onFocusin = () => {
48 + this.show('iOS系统:软键盘弹出');
49 + }
50 +
51 + // iOS失去焦点
52 + onFocusout = () => {
53 + this.hidden('iOS系统:软键盘收起');
54 + }
55 +
56 + /**
57 + * @function onStart 开始监听虚拟键盘
58 + */
59 + onStart = () => {
60 + if (this.type == 1) {
61 + // 获取窗口的高度
62 + window.addEventListener('resize', this.onResize);
63 + }
64 + if (this.type == 2) {
65 + // iOS系统
66 + window.addEventListener('focusin', this.onFocusin);
67 + window.addEventListener('focusout', this.onFocusout);
68 + }
69 + }
70 +
71 + /**
72 + * @function onEnd 结束监听虚拟键盘
73 + */
74 + onEnd = () => {
75 + if (this.type == 1) {
76 + //获取窗口的高度
77 + window.removeEventListener('resize', this.onResize);
78 + }
79 + if (this.type == 2) {
80 + window.removeEventListener('focusin', this.onFocusin);
81 + window.removeEventListener('focusout', this.onFocusout);
82 + }
83 + }
84 +
85 + /**
86 + * @function onShow 传递一个回调函数
87 + * @param 虚拟键盘弹出时触发
88 + */
89 + onShow = (fn) => {
90 + this.show = fn;
91 + }
92 +
93 + /**
94 + * @function onHidden 传递一个回调函数
95 + * @param 虚拟键盘隐藏时触发
96 + */
97 + onHidden = (fn) => {
98 + this.hidden = fn;
99 + }
100 +}
101 +
102 +export default MonitorKeyboard
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-28 10:17:40
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2024-09-03 16:01:59
6 + * @FilePath: /vue2_vite_web/src/utils/axios.js
7 + * @Description:
8 + */
9 +import axios from 'axios';
10 +import router from '@/router';
11 +import qs from 'Qs'
12 +import { strExist } from '@/utils/tools'
13 +// import { parseQueryString } from '@/utils/tools'
14 +
15 +axios.defaults.params = {
16 + f: 'tools',
17 +};
18 +
19 +/**
20 + * @description 请求拦截器
21 + */
22 +axios.interceptors.request.use(
23 + config => {
24 + // const url_params = parseQueryString(location.href);
25 + // GET请求默认打上时间戳，避免从缓存中拿数据。
26 + const timestamp = config.method === 'get' ? (new Date()).valueOf() : '';
27 + /**
28 + * POST PHP需要修改数据格式
29 + * 序列化POST请求时需要屏蔽上传相关接口，上传相关接口序列化后报错
30 + */
31 + config.data = config.method === 'post' && !strExist(['a=upload', 'upload.qiniup.com'], config.url) ? qs.stringify(config.data) : config.data;
32 + // 绑定默认请求头
33 + config.params = { ...config.params, timestamp }
34 + return config;
35 + },
36 + error => {
37 + // 请求错误处理
38 + return Promise.reject(error);
39 + });
40 +
41 +/**
42 + * @description 响应拦截器
43 + */
44 +axios.interceptors.response.use(
45 + response => {
46 + // 默认显示错误提示
47 + response.data.show = true;
48 + if (response.data.code === 401) {
49 + // 特殊标识-带此标识报错不显示
50 + response.data.show = false;
51 + /**
52 + * 未授权跳转登录页
53 + * 带着上一个页面的信息, 授权完成后 返回当前页面
54 + */
55 + router.replace({ path: '/auth', query: { href: location.hash, prefixAPI } });
56 + }
57 + return response;
58 + },
59 + error => {
60 + return Promise.reject(error);
61 + });
62 +
63 +export default axios;
1 +/*
2 + * @Date: 2022-05-16 17:21:45
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-06-29 17:00:15
5 + * @FilePath: /tswj/src/utils/generateRoute.js
6 + * @Description: 文件描述
7 + */
8 +
9 +/**
10 + * 根据后台返回的路径，生成页面的组件模版
11 + * @param {*} component
12 + * @returns 模版地址
13 + */
14 +function loadView(component) {
15 + return () => import(`../views/${component}.vue`)
16 +}
17 +
18 +/**
19 + * 生成路由结构
20 + * @param {*} routes
21 + */
22 +const generateRoutes = (routes) => {
23 + const arr = []
24 + routes.forEach(route => {
25 + const router = {}
26 + const {
27 + path,
28 + redirect,
29 + name,
30 + component,
31 + keepAlive,
32 + meta,
33 + children
34 + } = route
35 +
36 + router.path = path
37 + redirect && (router.redirect = redirect)
38 + name && (router.name = name)
39 + router.component = loadView(component)
40 + keepAlive && (router.keepAlive = keepAlive)
41 + meta && (router.meta = meta)
42 + router.children = !Array.isArray(children) || generateRoutes(children);
43 + arr.push(router)
44 + })
45 + return arr
46 +}
47 +
48 +export default generateRoutes;
1 +import wx from 'weixin-js-sdk'
2 +import axios from '@/utils/axios';
3 +
4 +const fn = (to) => {
5 + // 路由名
6 + let ruleName = location.href.split('#/')[1].split('?')[0];
7 +
8 + const icon = 'https://cdn.lifeat.cn/webappgroup/betterLifelogo.png'
9 +
10 + const shareInfoMap = {
11 + 'client/index': {
12 + title: '童声无界',
13 + desc: '引导页',
14 + icon
15 + },
16 + 'client/chooseSchool': {
17 + title: '选择幼儿园',
18 + desc: '引导页',
19 + icon
20 + },
21 + default: {
22 + title: to.name,
23 + desc: window.location.href,
24 + icon
25 + },
26 + }
27 + let infoMap = shareInfoMap[ruleName] ? shareInfoMap[ruleName] : shareInfoMap['default'];
28 + // console.warn(ruleName);
29 + console.warn(infoMap);
30 + console.warn(wx);
31 + console.warn(axios);
32 +}
33 +export default fn
34 +// 这个判断后加的为了减少请求次数，据后端说有次数限制，当需要分享的页面才去请求接口。
35 +// if (shareInfoMap[ruleName]) {
36 +// // request 是封装的请求
37 +// request.post('/wxmp/sign/jsSdk', {
38 +// url: location.href,
39 +// }).then(res => {
40 +// let { timestamp, nonceStr, signature, appId } = res;
41 +// wx.config({
42 +// debug: false,
43 +// appId,
44 +// timestamp,
45 +// nonceStr,
46 +// signature,
47 +// jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
48 +// });
49 +// wx.error(function (errres) {
50 +// console.info(errres)
51 +// })
52 +// wx.ready(() => { //需在用户可能点击分享按钮前就先调用
53 +// console.info('ready')
54 +// //分享朋友
55 +// wx.updateAppMessageShareData({
56 +// title: infoMap.title, // 分享标题
57 +// desc: infoMap.desc, // 分享描述
58 +// link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
59 +// imgUrl: infoMap.icon, // 分享图标
60 +// success: function () {
61 +// console.info("成功")
62 +// // 设置成功
63 +// },
64 +// fail: function (erres) {
65 +// console.info('失败：', erres)
66 +// }
67 +// })
68 +// //分享到 朋友圈
69 +// wx.updateTimelineShareData({
70 +// title: infoMap.title, // 分享标题
71 +// link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
72 +// imgUrl: infoMap.icon, // 分享图标
73 +// success: function () {
74 +// console.info("成功")
75 +// // 设置成功
76 +// },
77 +// fail: function (erres) {
78 +// console.info('失败：', erres)
79 +// }
80 +// })
81 +// });
82 +// }).catch(err => {
83 +// console.info('err:', err)
84 +// })
85 +// }
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 + * @Date: 2022-04-18 15:59:42
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-08-07 13:31:59
5 + * @FilePath: /map-demo/src/utils/tools.js
6 + * @Description: 文件描述
7 + */
8 +import dayjs from 'dayjs';
9 +
10 +// 格式化时间
11 +const formatDate = (date) => {
12 + return dayjs(date).format('YYYY-MM-DD HH:mm');
13 +};
14 +
15 +/**
16 + * @description 判断浏览器属于平台
17 + * @returns
18 + */
19 +const wxInfo = () => {
20 + let u = navigator.userAgent;
21 + let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
22 + let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
23 + let uAgent = navigator.userAgent.toLowerCase();
24 + let isTable = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
25 + let isPC = uAgent.match(
26 + /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i,
27 + )
28 + ? false
29 + : true;
30 + return {
31 + isAndroid,
32 + isiOS,
33 + isTable,
34 + isPC,
35 + };
36 +};
37 +
38 +/**
39 + * @description 判断多行省略文本
40 + * @param {*} id 目标dom标签
41 + * @returns
42 + */
43 +const hasEllipsis = (id) => {
44 + let oDiv = document.getElementById(id);
45 + let flag = false;
46 + if (oDiv.scrollHeight > oDiv.clientHeight) {
47 + flag = true
48 + }
49 + return flag
50 +}
51 +
52 +/**
53 + * @description 解析URL参数
54 + * @param {*} url
55 + * @returns
56 + */
57 +const parseQueryString = url => {
58 + var json = {};
59 + var arr = url.indexOf('?') >= 0 ? url.substr(url.indexOf('?') + 1).split('&') : [];
60 + arr.forEach(item => {
61 + var tmp = item.split('=');
62 + json[tmp[0]] = tmp[1];
63 + });
64 + return json;
65 +}
66 +
67 +/**
68 + * 字符串包含字符数组中字符的状态
69 + * @param {*} array 字符数组
70 + * @param {*} str 字符串
71 + * @returns 包含状态
72 + */
73 +const strExist = (array, str) => {
74 + const exist = array.filter(arr => {
75 + if (str.indexOf(arr) >= 0) return str;
76 + })
77 + return exist.length > 0
78 +}
79 +
80 +export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist };
1 +import VConsole from 'vconsole';
2 +
3 +// const vConsole = new VConsole();
4 +let vConsole = '';
5 +// 或者使用配置参数来初始化，详情见文档
6 +if (+import.meta.env.VITE_CONSOLE) {
7 + vConsole = new VConsole({ theme: 'dark' });
8 +}
9 +
10 +export default vConsole
1 +<!--
2 + * @Date: 2024-08-27 10:06:30
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-26 13:37:46
5 + * @FilePath: /hager/src/views/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div></div>
10 +</template>
11 +
12 +<script>
13 +
14 +export default {
15 + components: {},
16 + data () {
17 + return {
18 + }
19 + },
20 + async mounted () {
21 + },
22 + methods: {
23 +
24 + }
25 +}
26 +</script>
27 +
28 +<style lang="less" scoped>
29 +</style>
1 +{
2 + "compilerOptions": {
3 + /* 基本选项 */
4 + "target": "esnext", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
5 + "module": "CommonJS", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
6 + "lib": [ // 指定要包含在编译中的库文件
7 + "esnext",
8 + "dom",
9 + "dom.iterable",
10 + "scripthost"
11 + ],
12 + "allowJs": true, // 允许编译 javascript 文件
13 + // "checkJs": true, // 报告 javascript 文件中的错误
14 + "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
15 + // "declaration": true, // 生成相应的 '.d.ts' 文件
16 + // "sourceMap": true, // 生成相应的 '.map' 文件
17 + // "outFile": "./", // 将输出文件合并为一个文件
18 + "outDir": "./", // 指定输出目录
19 + // "rootDir": "./", // 用来控制输出目录结构 --outDir.
20 + "removeComments": true, // 删除编译后的所有的注释
21 + // "noEmit": true, // 不生成输出文件
22 + "importHelpers": true, // 从 tslib 导入辅助工具函数
23 + "isolatedModules": false, // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）
24 +
25 + /* 严格的类型检查选项 */
26 + "strict": true, // 启用所有严格类型检查选项
27 + // "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
28 + // "strictNullChecks": true, // 启用严格的 null 检查
29 + // "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候，生成一个错误
30 + // "alwaysStrict": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
31 +
32 + /* 额外的检查 */
33 + "noUnusedLocals": true, // 有未使用的变量时，抛出错误
34 + "noUnusedParameters": true, // 有未使用的参数时，抛出错误
35 + "noImplicitReturns": true, // 并不是所有函数里的代码都有返回值时，抛出错误
36 + "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
37 +
38 + /* 模块解析选项 */
39 + "moduleResolution": "node", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
40 + "baseUrl": ".", // 用于解析非相对模块名称的基目录
41 + "paths": { // 模块名到基于 baseUrl 的路径映射的列表
42 + "@/*": [
43 + "src/*"
44 + ]
45 + },
46 + // "rootDirs": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容
47 + // "typeRoots": [], // 包含类型声明的文件列表
48 + "types": [ // 需要包含的类型声明文件名列表
49 + // "webpack-env",
50 + "vite/client",
51 + "lodash",
52 + "moment",
53 + "node",
54 + "jquery",
55 + ],
56 + "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
57 +
58 + /* Source Map Options */
59 + // "sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
60 + // "mapRoot": "./", // 指定调试器应该找到映射文件而不是生成文件的位置
61 + // "inlineSourceMap": true, // 生成单个 sourcemaps 文件，而不是将 sourcemaps 生成不同的文件
62 + // "inlineSources": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
63 +
64 + /* 其他选项 */
65 + // "experimentalDecorators": true, // 启用装饰器
66 + // "emitDecoratorMetadata": true, // 为装饰器提供元数据的支持
67 +
68 + "esModuleInterop": true, // 可以在es6中导入commonjs
69 + },
70 + "include": [
71 + "src/**/*"
72 + ],
73 + "exclude": [
74 + "node_modules",
75 + "dist"
76 + ],
77 + "vueCompilerOptions": {
78 + "target": 2,
79 + "experimentalSuppressInvalidJsxElementTypeErrors": true
80 + }
81 +}
1 +/*
2 + * @Date: 2024-08-26 10:12:56
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-08-29 17:50:26
5 + * @FilePath: /vue2_vite_web/vite.config.js
6 + * @Description: 文件描述
7 + */
8 +// import vue from '@vitejs/plugin-vue'
9 +import vue from "@vitejs/plugin-vue2";
10 +import legacy from "@vitejs/plugin-legacy";
11 +import dynamicImport from 'vite-plugin-dynamic-import';
12 +import { defineConfig, loadEnv } from 'vite';
13 +import { createProxy } from './build/proxy'
14 +
15 +// var path = require('path');
16 +import path from 'path-browserify';
17 +// const fs = require('fs');
18 +
19 +// https://vitejs.dev/config/
20 +export default ({ command, mode }) => {
21 +const root = process.cwd();
22 +
23 +const viteEnv = loadEnv(mode, root);
24 +// let isProd = (command === 'serve'); // 情景配置是否为开发模式 serve 或 build
25 +
26 +return defineConfig({
27 + base: viteEnv.VITE_BASE, // 开发或生产环境服务的公共基础路径。
28 + plugins: [
29 + vue(),
30 + legacy({
31 + targets: ["android 4", "ios 8", "chrome 52", "ie 11"],
32 + additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
33 + renderLegacyChunks: true,
34 + polyfills: [
35 + "es.symbol",
36 + "es.array.filter",
37 + "es.promise",
38 + "es.promise.finally",
39 + "es/map",
40 + "es/set",
41 + "es.array.for-each",
42 + "es.object.define-properties",
43 + "es.object.define-property",
44 + "es.object.get-own-property-descriptor",
45 + "es.object.get-own-property-descriptors",
46 + "es.object.keys",
47 + "es.object.to-string",
48 + "web.dom-collections.for-each",
49 + "esnext.global-this",
50 + "esnext.string.match-all",
51 + ],
52 + }),
53 + dynamicImport(),
54 + ],
55 + publicDir: 'public', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。
56 + // cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
57 + resolve: {
58 + alias: {
59 + // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
60 + '@': path.resolve(__dirname, 'src'),
61 + '@components': path.resolve(__dirname, 'src/components'),
62 + '@composables': path.resolve(__dirname, 'src/composables'),
63 + '@utils': path.resolve(__dirname, 'src/utils'),
64 + '@images': path.resolve(__dirname, 'src/assets/images'),
65 + '@css': path.resolve(__dirname, 'src/assets/css'),
66 + '@mock': path.resolve(__dirname, 'src/assets/mock'),
67 + common: path.resolve(__dirname, 'src/common'),
68 + },
69 + // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
70 + // conditions: [''], // 在解析包的 情景导出 时允许的附加条件。
71 + // mainFields: [''], // package.json 中，在解析包的入口点时尝试的字段列表。注意，这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，主字段将被忽略。
72 + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会干扰 IDE 和类型支持。
73 + },
74 + logLevel: 'info', // 调整控制台输出的级别，默认为 'info'。
75 + // clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。
76 + server: {
77 + host: '0.0.0.0',
78 + port: viteEnv.VITE_PORT, // 本地服务端口
79 + // strictPort: true, // 设为true时若端口已被占用则会直接退出, 而不是尝试下一个可用端口
80 + // https: {
81 + // key: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2-key.pem')),
82 + // cert: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2.pem')),
83 + // },
84 + // open: false, // 在服务器启动时自动在浏览器中打开应用程序. 当此值为字符串时, 会被当作URL的路径名.
85 + // proxy: { // 代理
86 + // '/srv/': {
87 + // // target: 'http://voice.onwall.cn',
88 + // target: viteEnv.VITE_PROXY_TARGET,
89 + // changeOrigin: true,
90 + // // rewrite: (path) => path.replace(/^\/api/, '')
91 + // },
92 + // },
93 + proxy: createProxy(viteEnv.VITE_PROXY_PREFIX, viteEnv.VITE_PROXY_TARGET),
94 + // cors: '', // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
95 + // force: '', // 设置为 true 强制使依赖预构建。
96 + // hmr: '', // 禁用或配置 HMR 连接（用于 HMR websocket 必须使用不同的 http 服务器地址的情况）。 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层。
97 + // watch: '', // 传递给 chokidar 的文件系统监视器选项。
98 + },
99 + build: {
100 + // outDir: 'voice', // 指定输出路径(相对于项目根目录).
101 + outDir: viteEnv.VITE_OUTDIR, // 指定输出路径(相对于项目根目录).
102 + assetsDir: 'static',
103 + rollupOptions: {
104 + output: {
105 + chunkFileNames: 'static/js/[name]-[hash].js',
106 + entryFileNames: 'static/js/[name]-[hash].js',
107 + assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
108 + },
109 + input: {
110 + // 多页面应用模式, 打包时配置，运行配置要处理root
111 + main: path.resolve(__dirname, 'index.html'),
112 + // mono1: path.resolve(__dirname, 'src/packages/mono1/index.html'),
113 + // mono2: path.resolve(__dirname, 'src/packages/mono2/index.html'),
114 + },
115 + },
116 + target: 'es2015'
117 + },
118 +});
119 +};
This diff could not be displayed because it is too large.