Skip to content

Z
zc-qiyewx-app
Commit e0c1016e authored by 杨勇飞's avatar 杨勇飞
Browse files
Options

初始化项目

parent 18466852
Show whitespace changes
Inline Side-by-side
Showing with 1144 additions and 0 deletions
.gitignore 0 → 100644
View file @ e0c1016e
/node_modules/
/unpackage/dist
manifest.json
.idea" "
App.vue 0 → 100644
View file @ e0c1016e
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
index.html 0 → 100644
View file @ e0c1016e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js 0 → 100644
View file @ e0c1016e
import App from './App'
import Vue from 'vue'
// 引入 uni-ui 组件
import { uniBadge, uniTable, uniTr, uniTh, uniTd } from '@dcloudio/uni-ui'
Vue.component('uni-badge', uniBadge)
Vue.component('uni-table', uniTable)
Vue.component('uni-tr', uniTr)
Vue.component('uni-th', uniTh)
Vue.component('uni-td', uniTd)
Vue.config.productionTip = false
App.mpType = 'app'
// #ifndef VUE3
try {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
} catch (error) { }
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
\ No newline at end of file
package-lock.json 0 → 100644
View file @ e0c1016e
{
"name": "zc-qiyeWxApp",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"@dcloudio/uni-ui": "^1.5.7",
"@qiun/ucharts": "^2.5.0-20230101",
"echarts": "^5.6.0"
}
},
"node_modules/@dcloudio/uni-ui": {
"version": "1.5.7",
"resolved": "https://registry.npmmirror.com/@dcloudio/uni-ui/-/uni-ui-1.5.7.tgz",
"integrity": "sha512-DugxSIrQrze1FLdUOj9a+JEQ0bHGjnJTcGUK1mN/MivKg7nuKJBRWk5Ipa9sUdoBznX6ndz5h2e7Uao6x1CdCw==",
"license": "Apache-2.0"
},
"node_modules/@qiun/ucharts": {
"version": "2.5.0-20230101",
"resolved": "https://registry.npmmirror.com/@qiun/ucharts/-/ucharts-2.5.0-20230101.tgz",
"integrity": "sha512-C7ccBgfPuGF6dxTRuMW0NPPMSCf1k/kh3I9zkRVBc5PaivudX/rPL+jd2Wty6gn5ya5L3Ob+YmYe09V5xw66Cw==",
"license": "Apache"
},
"node_modules/echarts": {
"version": "5.6.0",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.6.1"
}
},
"node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
},
"node_modules/zrender": {
"version": "5.6.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
"license": "BSD-3-Clause",
"dependencies": {
"tslib": "2.3.0"
}
}
}
}
package.json 0 → 100644
View file @ e0c1016e
{
"dependencies": {
"@dcloudio/uni-ui": "^1.5.7",
"@qiun/ucharts": "^2.5.0-20230101",
"echarts": "^5.6.0"
}
}
pages.json 0 → 100644
View file @ e0c1016e
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
pages/index/index.vue 0 → 100644
View file @ e0c1016e
<template>
<view class="report-container">
<!-- 顶部时间导航 -->
<view class="time-nav">
<view class="nav-item" :class="{active: activeTime === 'month'}" @click="switchTime('month')">本月</view>
<view class="nav-item" :class="{active: activeTime === 'week'}" @click="switchTime('week')">本周</view>
<view class="nav-item" :class="{active: activeTime === 'yesterday'}" @click="switchTime('yesterday')">昨日</view>
<view class="nav-item" :class="{active: activeTime === 'today'}" @click="switchTime('today')">今日</view>
</view>
<!-- 项目概览卡片 -->
<view class="project-card">
<view class="overview-content">
<!-- 左侧环状进度 -->
<view class="progress-circle">
<view class="circle-wrapper" :style="{
background: `conic-gradient(#FF4B4B 0% ${currentData.overview.submitRate}%, #F5F5F5 ${currentData.overview.submitRate}% 100%)`
}">
<view class="circle-text">
<text class="percentage">{{currentData.overview.submitRate}}</text>
<text class="label">日报提交</text>
<text class="count">{{currentData.overview.submitCount}}</text>
</view>
</view>
</view>
<!-- 右侧数据统计 -->
<view class="statistics">
<view class="stat-row">
<view class="stat-item">
<text class="number">{{currentData.overview.stats.projectCount}}</text>
<text class="rate">项目</text>
</view>
<view class="stat-item">
<text class="number">{{currentData.overview.stats.orderCount}}</text>
<text class="rate">单量</text>
</view>
</view>
<view class="stat-row">
<view class="stat-item">
<text class="number">{{currentData.overview.stats.volumeCount}}</text>
<text class="rate">方量</text>
</view>
<view class="stat-item">
<text class="number">{{currentData.overview.stats.weightCount}}</text>
<text class="rate">重量</text>
</view>
</view>
</view>
</view>
</view>
<!-- 应收应付信息 -->
<view class="finance-info">
<!-- 应收模块 -->
<view class="finance-block">
<view class="finance-item receivable">
<!-- 左侧图标 -->
<view class="left-section">
<view class="icon">￥</view>
</view>
<!-- 右侧内容 -->
<view class="right-section">
<view class="main-info">
<view class="amount-section">
<text class="amount">{{currentData.finance.receivable.total}}</text>
<text class="label">应收</text>
</view>
<view class="extra-info">
<view class="info-row">
<text class="label">预计毛利</text>
<text class="value">{{currentData.finance.receivable.profit}}</text>
</view>
<view class="info-row">
<text class="label">毛利率</text>
<text class="value">{{currentData.finance.receivable.profitRate}}%</text>
</view>
</view>
</view>
<view class="progress-bar">
<view class="progress" :style="{ width: currentData.finance.receivable.profitRate + '%' }"></view>
</view>
</view>
</view>
</view>
<!-- 应付模块 -->
<view class="finance-block">
<view class="finance-item payable">
<!-- 左侧图标 -->
<view class="left-section">
<view class="icon">￥</view>
</view>
<!-- 右侧内容 -->
<view class="right-section">
<view class="main-info">
<view class="amount-section">
<text class="amount">{{currentData.finance.payable.total}}</text>
<text class="label">应付</text>
</view>
<view class="extra-info">
<view class="info-row">
<text class="label">现结</text>
<text class="value cash">{{currentData.finance.payable.cash}}</text>
</view>
<view class="info-row">
<text class="label">月结</text>
<text class="value monthly">{{currentData.finance.payable.monthly}}</text>
</view>
</view>
</view>
<view class="progress-bar">
<view class="progress cash" :style="{ width: cashRatio }"></view>
<view class="progress monthly" :style="{
left: cashRatio,
width: monthlyRatio
}"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 图表区域 -->
<view class="chart-container">
<view class="chart-header">
<text class="chart-title">模拟老板对比</text>
<view class="sort-buttons">
<text class="sort-btn" :class="{active: sortType === 'receivable'}" @click="sortChart('receivable')">
<text class="sort-icon"></text>
应收
</text>
<text class="sort-btn" :class="{active: sortType === 'payable'}" @click="sortChart('payable')">
<text class="sort-icon"></text>
应付
</text>
<text class="sort-btn" :class="{active: sortType === 'profitRate'}" @click="sortChart('profitRate')">
<text class="sort-icon"></text>
利润
</text>
</view>
</view>
<scroll-view class="chart-scroll" scroll-x>
<view class="chart-wrapper" id="myChart"></view>
</scroll-view>
</view>
<!-- 项目运营表格 -->
<view class="table-container">
<text class="table-title">项目运营情况</text>
<uni-table :data="currentData.tableData" border stripe emptyText="暂无数据">
<uni-tr>
<uni-th align="center">项目</uni-th>
<uni-th align="center">区域</uni-th>
<uni-th align="center">销售额</uni-th>
<uni-th align="center">增长率</uni-th>
</uni-tr>
</uni-table>
</view>
</view>
</template>
<script>
import * as echarts from 'echarts'
import { uniIcons } from '@dcloudio/uni-ui'
export default {
components: {
uniIcons
},
data() {
return {
loading: false,
activeTime: 'today',
myChart: null,
sortType: 'receivable',
// 所有时间维度的数据集合
timeData: {
month: {
overview: {
submitRate: 35.68,
submitCount: 156,
stats: {
projectCount: 256,
orderCount: 328,
volumeCount: 45,
weightCount: 89
}
},
finance: {
receivable: {
total: 892650,
profit: 678900,
profitRate: 92.35
},
payable: {
total: 8920,
cash: 3580,
monthly: 5340
}
},
chart: {
receivable: [320, 450, 380, 420, 390, 410],
payable: [220, 350, 280, 320, 290, 310],
profitRate: [45.5, 38.2, 42.8, 35.6, 48.9, 40.2]
},
tableData: [
{ project: '项目A', area: '华东区', sales: 2234.5, growth: 15.8 },
{ project: '项目B', area: '华南区', sales: 1986.3, growth: 12.3 },
{ project: '项目C', area: '华北区', sales: 1756.8, growth: 18.2 },
{ project: '项目D', area: '西南区', sales: 1543.2, growth: -3.1 },
{ project: '项目E', area: '西北区', sales: 1432.1, growth: 8.6 }
]
},
week: {
overview: {
submitRate: 28.45,
submitCount: 95,
stats: {
projectCount: 168,
orderCount: 235,
volumeCount: 28,
weightCount: 65
}
},
finance: {
receivable: {
total: 568950,
profit: 458900,
profitRate: 88.69
},
payable: {
total: 5860,
cash: 2680,
monthly: 3180
}
},
chart: {
receivable: [220, 350, 280, 320, 290, 310],
payable: [120, 250, 180, 220, 190, 210],
profitRate: [42.5, 35.2, 39.8, 32.6, 45.9, 37.2]
},
tableData: [
{ project: '项目A', area: '华东区', sales: 1534.5, growth: 11.5 },
{ project: '项目B', area: '华南区', sales: 1286.3, growth: 9.3 },
{ project: '项目C', area: '华北区', sales: 956.8, growth: 13.2 },
{ project: '项目D', area: '西南区', sales: 843.2, growth: -2.1 },
{ project: '项目E', area: '西北区', sales: 732.1, growth: 6.6 }
]
},
yesterday: {
overview: {
submitRate: 25.35,
submitCount: 85,
stats: {
projectCount: 138,
orderCount: 186,
volumeCount: 22,
weightCount: 58
}
},
finance: {
receivable: {
total: 498950,
profit: 398580,
profitRate: 85.69
},
payable: {
total: 4810,
cash: 2405,
monthly: 2405
}
},
chart: {
receivable: [180, 290, 220, 260, 230, 250],
payable: [80, 190, 120, 160, 130, 150],
profitRate: [40.5, 33.2, 37.8, 30.6, 43.9, 35.2]
},
tableData: [
{ project: '项目A', area: '华东区', sales: 934.5, growth: 9.5 },
{ project: '项目B', area: '华南区', sales: 886.3, growth: 7.3 },
{ project: '项目C', area: '华北区', sales: 756.8, growth: 11.2 },
{ project: '项目D', area: '西南区', sales: 643.2, growth: -1.1 },
{ project: '项目E', area: '西北区', sales: 532.1, growth: 4.6 }
]
},
today: {
overview: {
submitRate: 22.35,
submitCount: 80,
stats: {
projectCount: 128,
orderCount: 156,
volumeCount: 19,
weightCount: 55
}
},
finance: {
receivable: {
total: 488950,
profit: 557580,
profitRate: 87.69
},
payable: {
total: 4710,
cash: 2305,
monthly: 2405
}
},
chart: {
receivable: [150, 260, 190, 230, 200, 220, 180, 240, 210, 170],
payable: [50, 160, 90, 130, 100, 120, 80, 140, 110, 70],
profitRate: [38.5, 31.2, 35.8, 28.6, 41.9, 33.2, 36.5, 29.8, 34.5, 32.1]
},
tableData: [
{ project: '项目A', area: '华东区', sales: 834.5, growth: 8.5 },
{ project: '项目B', area: '华南区', sales: 786.3, growth: 6.3 },
{ project: '项目C', area: '华北区', sales: 656.8, growth: 10.2 },
{ project: '项目D', area: '西南区', sales: 543.2, growth: -1.1 },
{ project: '项目E', area: '西北区', sales: 432.1, growth: 3.6 }
]
}
}
}
},
computed: {
// 当前选中时间的数据
currentData() {
return this.timeData[this.activeTime]
},
// 应付现结比例
cashRatio() {
const { cash, total } = this.currentData.finance.payable
return (cash / total * 100).toFixed(2) + '%'
},
// 应付月结比例
monthlyRatio() {
const { monthly, total } = this.currentData.finance.payable
return (monthly / total * 100).toFixed(2) + '%'
}
},
mounted() {
this.initChart()
this.$nextTick(() => {
this.sortChart('receivable')
window.addEventListener('resize', this.onResize)
})
},
methods: {
initChart() {
this.myChart = echarts.init(document.getElementById('myChart'))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['应收', '应付', '利润率'],
bottom: 0,
padding: [0, 0, 5, 0]
},
grid: {
left: '3%',
right: '4%',
top: '8%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F', '老板G', '老板H', '老板I', '老板J'],
axisTick: {
alignWithLabel: true
}
},
yAxis: [
{
type: 'value',
name: '金额(万元)',
position: 'left',
axisLine: {
show: true
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '利润率(%)',
position: 'right',
min: 0,
max: 100,
axisLine: {
show: true
},
splitLine: {
show: false
}
}
],
series: [
{
name: '应收',
type: 'bar',
barGap: 0,
barWidth: 15,
itemStyle: {
color: '#52C41A'
},
data: this.currentData.chart.receivable
},
{
name: '应付',
type: 'bar',
barWidth: 15,
itemStyle: {
color: '#FF4D4F'
},
data: this.currentData.chart.payable
},
{
name: '利润率',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#1890FF'
},
lineStyle: {
width: 2
},
data: this.currentData.chart.profitRate
}
]
}
this.myChart.setOption(option)
},
switchTime(time) {
this.activeTime = time
// 更新图表数据
this.myChart.setOption({
series: [{
data: this.currentData.chart.receivable
}, {
data: this.currentData.chart.payable
}, {
data: this.currentData.chart.profitRate
}]
})
},
onResize() {
if (this.myChart) {
this.myChart.resize()
}
},
sortChart(type) {
this.sortType = type
// 获取要排序的数据
const data = this.currentData.chart
const bossNames = ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F', '老板G', '老板H', '老板I', '老板J']
// 创建排序用的数组
const sortArray = bossNames.map((name, index) => ({
name,
receivable: data.receivable[index],
payable: data.payable[index],
profitRate: data.profitRate[index]
}))
// 排序
sortArray.sort((a, b) => {
// 降序排列
return b[type] - a[type]
})
// 更新图表
this.myChart.setOption({
xAxis: {
data: sortArray.map(item => item.name)
},
series: [{
name: '应收',
data: sortArray.map(item => item.receivable)
}, {
name: '应付',
data: sortArray.map(item => item.payable)
}, {
name: '利润率',
data: sortArray.map(item => item.profitRate)
}]
})
}
},
beforeDestroy() {
if (this.myChart) {
this.myChart.dispose()
}
window.removeEventListener('resize', this.onResize)
}
}
</script>
<style lang="scss">
// 可以定义全局变量
$primary-color: #52C41A;
$danger-color: #FF4D4F;
$warning-color: #FFA940;
$info-color: #13C2C2;
$text-primary: #333;
$text-secondary: #666;
.report-container {
padding: 15px;
background-color: #F5F7FA;
min-height: 100vh;
.time-nav {
display: flex;
background-color: #fff;
padding: 10px;
border-radius: 8px;
margin-bottom: 15px;
.nav-item {
flex: 1;
text-align: center;
padding: 8px 0;
font-size: 14px;
&.active {
color: #1890FF;
font-weight: bold;
}
}
}
.project-card {
background-color: #fff;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
.overview-content {
display: flex;
align-items: center;
.progress-circle {
width: 120px;
height: 120px;
position: relative;
margin-right: 20px;
.circle-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient(#FF4B4B 0% 22.35%, #F5F5F5 22.35% 100%);
display: flex;
align-items: center;
justify-content: center;
&::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #fff;
border-radius: 50%;
}
}
.circle-text {
position: relative;
z-index: 1;
text-align: center;
.percentage {
display: block;
font-size: 24px;
font-weight: bold;
color: #333;
}
.label {
display: block;
font-size: 12px;
color: #666;
margin: 2px 0;
}
.count {
display: block;
font-size: 14px;
color: #333;
}
}
}
.statistics {
flex: 1;
.stat-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
.stat-item {
.number {
display: block;
font-size: 20px;
color: #00C8B1;
font-weight: bold;
margin-bottom: 4px;
&:nth-child(2n) {
color: #FFA940;
}
}
.rate {
display: block;
font-size: 12px;
color: #666;
}
}
}
}
}
}
.finance-info {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
.finance-block {
width: 100%;
}
.finance-item {
background-color: #fff;
padding: 15px;
border-radius: 8px;
display: flex;
align-items: flex-start;
.left-section {
width: 60px;
margin-right: 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 0;
.icon {
width: 60px;
height: 60px;
border-radius: 12px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
}
.right-section {
flex: 1;
.main-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
.amount-section {
display: flex;
flex-direction: column;
.amount {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
line-height: 1.2;
}
.label {
font-size: 14px;
}
}
.extra-info {
text-align: right;
.info-row {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 13px;
color: #666;
margin-right: 8px;
}
.value {
font-size: 13px;
}
}
}
}
.progress-bar {
height: 4px;
background-color: #F5F5F5;
border-radius: 2px;
overflow: hidden;
.progress {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}
}
}
&.receivable {
.left-section .icon {
background-color: #52C41A;
}
.right-section {
.amount-section {
.amount, .label {
color: #52C41A;
}
}
.extra-info .info-row .value {
color: #52C41A;
}
.progress-bar .progress {
background-color: #52C41A;
}
}
}
&.payable {
.left-section .icon {
background-color: #FF4D4F;
}
.right-section {
.amount-section {
.amount, .label {
color: #FF4D4F;
}
}
.extra-info {
.info-row {
.value {
&.cash {
color: #FFA940;
}
&.monthly {
color: #13C2C2;
}
}
}
}
.progress-bar {
position: relative;
.progress {
&.cash {
background-color: #FFA940;
position: absolute;
left: 0;
width: 48.93%;
}
&.monthly {
background-color: #13C2C2;
position: absolute;
left: 48.93%;
width: 51.07%;
}
}
}
}
}
}
}
.chart-container {
background-color: #fff;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.chart-title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.sort-buttons {
display: flex;
gap: 4px;
.sort-btn {
font-size: 12px;
color: #666;
padding: 4px 8px;
border-radius: 12px;
background: #F5F5F5;
border: 1px solid #E8E8E8;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
.sort-icon {
font-family: "custom-icon";
}
&:hover {
color: #52C41A;
border-color: #52C41A;
background: #F6FFED;
}
&.active {
color: #fff;
background: #52C41A;
border-color: #52C41A;
}
}
}
}
.chart-scroll {
width: 100%;
overflow: hidden;
}
.chart-wrapper {
height: 210px;
min-width: 150%;
width: max-content;
margin-bottom: 10px;
}
}
.table-container {
background-color: #fff;
padding: 15px;
border-radius: 8px;
}
}
@font-face {
font-family: "custom-icon";
src: url('/static/fonts/iconfont.ttf') format('truetype');
}
.sort-icon::before {
content: '\e737'; // 排序图标的 unicode
}
</style>
uni.scss 0 → 100644
View file @ e0c1016e
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment