HB
/
ruoyi-miniapp
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改首页样式

master
爱~海~爱海爱海~右 1 month ago
parent
312a1f5283
commit
28177e5c0f
5 changed files with 115 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      pages/enterprise.vue
  2. 61
      pages/index.vue
  3. 2
      pages/task.vue
  4. 5
      static/scss/global.scss
  5. 37
      uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js

7
pages/enterprise.vue
Unescape View File

@ -116,7 +116,7 @@
:status="load"
marginTop="12"
marginBottom="12"
v-if="load !== 'nomore'"
v-if="load !== 'nomore' && list.length > 0"
/>
<cs-emty v-if="list.length == 0"></cs-emty>
</scroll-view>
@ -154,10 +154,11 @@ export default {
},
async onLoad() {
await this.getDict()
},
onShow() {
this.queryEnterprise()
},
// onShow() {
// this.queryEnterprise()
// },
onReady() {
this.getPageHeight()
},

61
pages/index.vue
Unescape View File

@ -47,6 +47,7 @@
bold
font-size="24"
color="#071437"
class="number"
></u-count-to>
<view class="">任务数量</view>
</view>
@ -82,31 +83,31 @@
:opts="opts"
:chartData="chartData"
:canvas2d="true"
style="height: 144px"
style="height: 288rpx"
></qiun-data-charts>
<view class="wd-flex" style="gap: 12px; flex-wrap: wrap">
<view class="wd-flex" style="gap: 24rpx; flex-wrap: wrap">
<view
class="wd-flex wd-flex-col wd-flex-center"
v-for="item in detail.legendData"
:key="item"
style="
border: 1px solid #f9f9f9;
width: calc(100% / 3 - 8px);
padding: 12px;
gap: 4px;
border-radius: 4px;
border: 2rpx solid #f9f9f9;
width: calc(100% / 3 - 16rpx);
padding: 24rpx;
gap: 8rpx;
border-radius: 8rpx;
"
>
<view class="wd-flex wd-flex-col" style="gap: 4px">
<view class="wd-flex wd-flex-col" style="gap: 8rpx">
<view
class="wd-flex"
style="align-items: center; gap: 4px"
style="align-items: center; gap: 8rpx"
>
<view
:style="{
width: '8px',
height: '4px',
borderRadius: '4px',
width: '16rpx',
height: '8rpx',
borderRadius: '8rpx',
backgroundColor: item.color
}"
></view>
@ -120,7 +121,7 @@
font-size="16"
color="#071437"
></u-count-to>
%
<text class="number">%</text>
</view>
</view>
</view>
@ -153,7 +154,11 @@
class="name"
:style="{
color:
queryParams.type == item.type ? '#071437' : '#78829d'
queryParams.type == item.type
? '#071437'
: '#78829d',
fontWeight:
queryParams.type == item.type ? '800' : 'normal'
}"
>
{{ item.name }}
@ -169,14 +174,14 @@
style="justify-content: space-between; padding: 12px"
>
<view class="wd-font-800">{{ item.name }}</view>
<view class="wd-font-800" style="color: #ff6f1e">
<view class="wd-font-800" style="color: #17c653">
<view>
<u-count-to
:start-val="0"
:end-val="item.count"
bold
font-size="14"
color="#FF6F1E"
color="#17C653"
></u-count-to>
<text>{{ queryParams.type == 1 ? '天' : '次' }}</text>
</view>
@ -288,9 +293,11 @@ export default {
this.detail = res.data
let curIndex = 0
const colorMap = []
const split = 1 / this.detail.completionRate.length
const data = this.detail.completionRate.map((item, index) => {
const color = `rgba(4, 180, 64,${1 - split * (index + 1)})`
const color = this.getGradientColor(
index,
this.detail.completionRate.length
)
const res = {
...item,
color
@ -335,7 +342,8 @@ export default {
name: `${max}%`,
fontSize: 24,
color: '#071437',
fontWeight: 'bold'
fontWeight: 'bold',
fontFamily: 'Tahoma'
},
subtitle: {
name: '完成率',
@ -349,7 +357,8 @@ export default {
offsetAngle: 90,
labelWidth: 15,
border: false,
borderColor: '#FFFFFF',
borderColor: '#F9F9F9',
borderWidth: 0.5,
linearType: 'none'
}
}
@ -398,6 +407,10 @@ export default {
// 然后截取前两位小数
let realVal = tempVal.substring(0, tempVal.length - 1)
return realVal
},
getGradientColor(index, total) {
const opacity = 1 - index / total + 0.1
return `rgba(4, 180, 64, ${opacity})`
}
}
}
@ -407,6 +420,13 @@ export default {
.view-container {
height: 100%;
}
.number {
font-family: 'Tahoma';
}
::v-deep .u-count-num {
font-family: 'Tahoma';
}
.view {
padding: 0 24rpx;
padding-bottom: 24rpx;
@ -441,7 +461,6 @@ export default {
.name {
z-index: 2;
position: inherit;
font-weight: bold;
}
&:first-child::before {
content: '';

2
pages/task.vue
Unescape View File

@ -133,7 +133,7 @@
marginBottom="12"
v-if="load !== 'nomore'"
/>
<cs-emty v-if="list.length == 0"></cs-emty>
<cs-emty marginTop="24" v-if="list.length == 0"></cs-emty>
</scroll-view>
</view>
</cs-page>

5
static/scss/global.scss
Unescape View File

@ -1,3 +1,8 @@
@font-face {
font-family: 'Tahoma';
src: url('https://hb.jzce.com/Tahoma.ttf') format('truetype');
}
page {
background-color: #f9f9f9;
position: relative;

37
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Unescape View File

@ -23,15 +23,15 @@ const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
const cfe = {
//demotype为自定义图表类型
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge", "candle", "demotype"],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
"categories": ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
//instance为实例变量承载属性，option为eopts承载属性，不要删除
"instance": {},
"option": {},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{
"tooltipDemo1":function(res){
"formatter": {
"tooltipDemo1": function(res) {
let result = ''
for (let i in res) {
if (i == 0) {
@ -51,18 +51,18 @@ const cfe = {
}
return result;
},
legendFormat:function(name){
return "自定义图例+"+name;
legendFormat: function(name) {
return "自定义图例+" + name;
},
yAxisFormatDemo:function (value, index) {
yAxisFormatDemo: function(value, index) {
return value + '元';
},
seriesFormatDemo:function(res){
seriesFormatDemo: function(res) {
return res.name + '年' + res.value + '元';
}
},
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
"demotype":{
"demotype": {
"color": color,
//在这里填写echarts的option即可
@ -71,7 +71,8 @@ const cfe = {
"column": {
"color": color,
"title": {
"text": ''
"text": '',
"fontFamoly": 'Tahoma'
},
"tooltip": {
"trigger": 'axis'
@ -266,7 +267,7 @@ const cfe = {
"name": '',
"type": 'pie',
"data": [],
"radius": '50%',
"radius": '100%',
"label": {
"show": true,
"color": "#666666",
@ -277,7 +278,8 @@ const cfe = {
"ring": {
"color": color,
"title": {
"text": ''
"text": '',
"fontFamoly": 'Tahoma'
},
"tooltip": {
"trigger": 'item'
@ -295,7 +297,7 @@ const cfe = {
"name": '',
"type": 'pie',
"data": [],
"radius": ['40%', '70%'],
"radius": ['40%', '100%'],
"avoidLabelOverlap": false,
"label": {
"show": true,
@ -383,8 +385,13 @@ const cfe = {
"seriesTemplate": {
"name": '业务指标',
"type": 'gauge',
"detail": {"formatter": '{value}%'},
"data": [{"value": 50, "name": '完成率'}]
"detail": {
"formatter": '{value}%'
},
"data": [{
"value": 50,
"name": '完成率'
}]
},
},
"candle": {

Write Preview
Loading…
Cancel
Save