图片
This commit is contained in:
liuye
76
src/components/AiCell/AiCell.vue
Normal file
76
src/components/AiCell/AiCell.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<section class="AiCell" :class="{bottomBorder,alignCenter,topLabel}">
|
||||
<div class="label" :class="{title}">
|
||||
<slot v-if="$slots.label" name="label"/>
|
||||
<span v-else>{{ label }}</span>
|
||||
</div>
|
||||
<div class="content" :class="{topLabel}">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiCell",
|
||||
props: {
|
||||
label: {default: ""},
|
||||
bottomBorder: Boolean,
|
||||
topLabel: Boolean,
|
||||
title: Boolean,
|
||||
alignCenter: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiCell {
|
||||
display: flex;
|
||||
min-height: 72px;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
padding: 14px 0;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
&.bottomBorder {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
&.alignCenter {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.topLabel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
color: #999;
|
||||
|
||||
|
||||
&.title {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
min-height: 40px;
|
||||
max-width: 500px;
|
||||
text-align: right;
|
||||
|
||||
&.topLabel {
|
||||
text-align: start;
|
||||
margin-top: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/components/AiListPage/AiListPage.vue
Normal file
115
src/components/AiListPage/AiListPage.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<section class="AppListPage">
|
||||
<div class="header" :style="{backgroundImage: url(headerBg)}">
|
||||
<img :src="headerBg" alt="">
|
||||
<p>{{label}}</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title">{{label}}</div>
|
||||
<div class="app-list">
|
||||
<div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.url)" >
|
||||
<!-- <div class="icon" :style="{backgroundImage: url(item.icon)}"></div> -->
|
||||
<img :src="item.icon" alt="" class="icon">
|
||||
<p>{{item.name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AppListPage",
|
||||
props: {
|
||||
label: String,
|
||||
appList: Array,
|
||||
headerBg: String
|
||||
},
|
||||
methods: {
|
||||
linkTo(url) {
|
||||
console.log(111)
|
||||
console.log(url)
|
||||
uni.navigateTo({url})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppListPage {
|
||||
padding-top: 20px;
|
||||
.header{
|
||||
width: calc(100% - 36px);
|
||||
height: 240px;
|
||||
margin: 0 18px 20px 18px;
|
||||
background-size: 100% 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
p{
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 50px;
|
||||
font-size: 46px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #26385C;
|
||||
line-height: 64px;
|
||||
// padding: 48px 50px 0 50px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
margin: 0 20px 20px;
|
||||
width: calc(100% - 40px);
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
.title{
|
||||
line-height: 70px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-left: 20px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.app-list{
|
||||
overflow: hidden;
|
||||
.item{
|
||||
text-align: center;
|
||||
padding-bottom: 38px;
|
||||
border-right: 1px solid #eee;
|
||||
border-top: 1px solid #eee;
|
||||
width: calc(33% - 1px);
|
||||
float: left;
|
||||
.icon{
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin: 40px 0 18px 0;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #3D434A;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(3n) {
|
||||
border-right: 0;
|
||||
}
|
||||
.item:nth-of-type(1),
|
||||
.item:nth-of-type(2),
|
||||
.item:nth-of-type(3) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
src/components/AiLoading/AiLoading.vue
Normal file
28
src/components/AiLoading/AiLoading.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<section class="AiLoading">
|
||||
<image :src="image"/>
|
||||
<span>{{ tips }}</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiLoading",
|
||||
props: {
|
||||
tips: {default: "应用加载中"},
|
||||
image: {default: "https://cdn.cunwuyun.cn/wxAdmin/img/message.png"}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiLoading {
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
88
src/components/AiResult/AiResult.vue
Normal file
88
src/components/AiResult/AiResult.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<section class="AiResult">
|
||||
<slot v-if="$slots.default"/>
|
||||
<template v-else>
|
||||
<image :src="result.image"/>
|
||||
<span class="tips">{{ result.tips }}</span>
|
||||
<slot name="extra" class="extra" v-if="$slots.extra"/>
|
||||
<div v-if="result.btn" class="btn" @tap="handleTap">{{ result.btn }}</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiResult",
|
||||
props: {
|
||||
tips: {default: "提交成功!"},
|
||||
image: {default: "https://cdn.cunwuyun.cn/dvcp/h5/result/success.png"},
|
||||
btn: {default: ""},
|
||||
status: {default: "success"},
|
||||
btnTap: Function
|
||||
},
|
||||
computed: {
|
||||
result() {
|
||||
let obj = {
|
||||
image: this.image,
|
||||
tips: this.tips,
|
||||
btn: this.btn
|
||||
}
|
||||
if (this.status == "error") {
|
||||
obj.image = this.$cdn + "result/fail.png"
|
||||
obj.tips = this.tips || "提交失败!"
|
||||
} else if (this.status == "loading") {
|
||||
obj.image = "https://cdn.cunwuyun.cn/wxAdmin/img/message.png"
|
||||
obj.tips = this.tips || "数据读取中..."
|
||||
}
|
||||
return obj
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTap() {
|
||||
this.btnTap && this.btnTap()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiResult {
|
||||
padding-top: 96px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
|
||||
& > image {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 16px auto 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.extra {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
margin-top: 80px;
|
||||
width: calc(100% - 192px);
|
||||
height: 88px;
|
||||
background: #197DF0;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/components/AiTable/AiTable.vue
Normal file
48
src/components/AiTable/AiTable.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<section class="AiTable">
|
||||
<u-table color="#333">
|
||||
<u-tr>
|
||||
<u-th v-for="(col,i) in colConfigs" :key="i" :width="col.width">{{ col.label }}</u-th>
|
||||
</u-tr>
|
||||
<u-tr v-for="(row,j) in data" :key="j">
|
||||
<u-td v-for="(col,i) in colConfigs" :key="i" :width="col.width">
|
||||
<slot v-if="col.slot" :name="col.slot" :row="row"/>
|
||||
<p v-else-if="col.dict">{{ $dict.getLabel(col.dict, row[col.prop]) }}</p>
|
||||
<p v-else>{{ row[col.prop] || "-" }}</p>
|
||||
</u-td>
|
||||
</u-tr>
|
||||
</u-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AiTable",
|
||||
props: {
|
||||
data: {default: () => []},
|
||||
colConfigs: {default: () => []},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiTable {
|
||||
border-radius: 8px;
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
|
||||
.u-table, .u-th {
|
||||
border-color: #D0D4DC !important;
|
||||
}
|
||||
|
||||
.u-th {
|
||||
background-color: #DFE6F4;
|
||||
color: #646D7F;
|
||||
}
|
||||
|
||||
.u-tr {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user