zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善原子组件

This commit is contained in:
sc 2021-11-16 16:18:06 +08:00
parent 5a028a883b
commit 62bef6098c
4 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/scMini/scStatusIndicator.vue
View File

@ -21,7 +21,7 @@
</script>
<style scoped>
.sc-state {display: inline-block;background: #000;width: 10px;height: 10px;border-radius: 50%;vertical-align: middle;}
.sc-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
.sc-status-processing {position: relative;}
.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}

22
src/components/scMini/scTrend.vue
View File

@ -9,11 +9,11 @@
<template>
<span class="sc-trend" :class="'sc-trend--'+type">
<el-icon v-if="type=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
<el-icon v-if="type=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
<el-icon v-if="type=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
<el-icon v-if="iconType=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
<el-icon v-if="iconType=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
<el-icon v-if="iconType=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
<em class="sc-trend-prefix">{{prefix}}</em>
<em class="sc-trend-value">{{absValue}}</em>
<em class="sc-trend-value">{{modelValue}}</em>
<em class="sc-trend-suffix">{{suffix}}</em>
</span>
</template>
@ -30,13 +30,23 @@
absValue(){
return Math.abs(this.modelValue);
},
iconType(v){
if(this.modelValue == 0){
v = 'Z'
}else if(this.modelValue < 0){
v = 'N'
}else if(this.modelValue > 0){
v = 'P'
}
return v
},
type(v){
if(this.modelValue == 0){
v = 'Z'
}else if(this.modelValue < 0){
v = this.reverse?'N':'P'
v = this.reverse?'P':'N'
}else if(this.modelValue > 0){
v = this.reverse?'P':'N'
v = this.reverse?'N':'P'
}
return v
}

10
src/views/home/work/components/myapp.vue
View File

@ -3,17 +3,17 @@
<ul class="myMods">
<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
<i :class="mod.meta.icon||'el-icon-menu'"></i>
<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
<p>{{ mod.meta.title }}</p>
</a>
<router-link v-else :to="{ path: mod.path }">
<i :class="mod.meta.icon||'el-icon-menu'"></i>
<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
<p>{{ mod.meta.title }}</p>
</router-link>
</li>
<li class="modItem-add" @click="addMods">
<a href="javascript:void(0)">
<i class="el-icon-plus"></i>
<el-icon><el-icon-plus /></el-icon>
</a>
</li>
</ul>
@ -27,7 +27,7 @@
<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
<template #item="{ element }">
<li :style="{background:element.meta.color||'#909399'}">
<i :class="element.meta.icon||'el-icon-menu'"></i>
<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
<p>{{element.meta.title}}</p>
</li>
</template>
@ -38,7 +38,7 @@
<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
<template #item="{ element }">
<li :style="{background:element.meta.color||'#909399'}">
<i :class="element.meta.icon||'el-icon-menu'"></i>
<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
<p>{{element.meta.title}}</p>
</li>
</template>

8
src/views/vab/mini.vue
View File

@ -21,7 +21,7 @@
<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
</el-space>
<p style="margin-top: 15px;color: #999;">金融行业可设置reverse反转颜色。</p>
<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
</el-card>
</el-col>
<el-col :lg="8">
@ -30,7 +30,7 @@
<h2>持续更新中...</h2>
<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
<p>原子组件库位置：@/components/scMini/*</p>
<el-button type="text">提交想法</el-button>
<el-button type="text" @click="goIssue">提交想法</el-button>
</div>
</el-card>
</el-col>
@ -52,7 +52,9 @@
},
methods: {
goIssue(){
window.open("https://gitee.com/lolicode/scui/issues")
}
}
}
</script>