Skip to content

jml0128 / xrk-bi

Go to a project
Commit 4b679a5b by wangxiao
Options

add box | banner

1 parent b4d1efe7
Inline Side-by-side
Showing with 94 additions and 2 deletions
src/packages/bi/src/components/mobile/task-content.vue
...@@ -7,10 +7,22 @@ ...@@ -7,10 +7,22 @@
<BiMobileTitle index="2" title="任务内容信息"></BiMobileTitle> <BiMobileTitle index="2" title="任务内容信息"></BiMobileTitle>
<div class="bi-mobile-base-info_content"> <div class="bi-mobile-base-info_content">
<div <div
class="bi-mobile-base-info_content_item" :class="
item.type !== 'banner' ? 'bi-mobile-base-info_content_item' : 'bi-mobile-base-info_banner_container'
"
v-for="(item, index) in info" v-for="(item, index) in info"
:key="index" :key="index"
> >
<template v-if="item.type === 'banner'">
<div
:style="{
backgroundImage: `linear-gradient(90deg,${item.color[0]},${item.color[1]})`
}"
class="bi-mobile-base-info_banner_item"
>
{{ item.text }}
</div>
</template>
<template v-if="item.type === 'text'"> <template v-if="item.type === 'text'">
<div class="bi-mobile-base-info_content_item_label"> <div class="bi-mobile-base-info_content_item_label">
{{ item.label }} {{ item.label }}
...@@ -56,6 +68,21 @@ ...@@ -56,6 +68,21 @@
</div> </div>
</div> </div>
</template> </template>
<template v-if="item.type === 'box'">
<div class="bi-mobile-base-info_content_item_label">
{{ item.label }}
</div>
<div class="bi-mobile-base-info_content_box">
<div v-for="(box, index) in item.value" :key="index">
<div class="bi-mobile-base-info_content_box_label">
{{ box.label }}
</div>
<div class="bi-mobile-base-info_content_box_value">
{{ box.value }}
</div>
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -89,12 +116,44 @@ export default { ...@@ -89,12 +116,44 @@ export default {
} }
.bi-mobile-base-info { .bi-mobile-base-info {
page-break-before: always; page-break-before: always;
&_banner_container {
font-size: 0.25rem;
}
&_banner_item {
// width: 2rem;
// height: 0.5rem;
padding: 0.1rem;
margin-top: 0.5rem;
width: fit-content;
color: #fff;
}
&_content { &_content {
width: 9.15rem; width: 9.15rem;
border: 0.03rem solid #e8e8e8; border: 0.03rem solid #e8e8e8;
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 0.34rem auto 0.6rem auto; margin: 0.34rem auto 0.6rem auto;
padding: 0 0.32rem; padding: 0 0.32rem;
&_box {
> div {
width: 33.33333333333333333%;
height: 2rem;
border: 1px solid #adadad;
color: #2d2d2d;
padding: 0.4rem;
text-align: center;
margin: 0 -1px -1px 0;
}
&_label {
font-size: 0.4rem;
}
&_value {
margin-top: 0.2rem;
font-size: 0.4rem;
}
margin-top: 0.3rem;
display: flex !important;
flex-wrap: wrap;
}
&_item { &_item {
font-size: 0.35rem; font-size: 0.35rem;
color: #9d9d9d; color: #9d9d9d;
......
src/packages/bi/src/personal-achievements/index.vue
...@@ -38,6 +38,11 @@ export default { ...@@ -38,6 +38,11 @@ export default {
singleChoice: [], singleChoice: [],
info: [ info: [
{ {
type: 'banner',
color: ['#6DD2FF', '#027CFA'],
text: '推广产品'
},
{
type: 'text', type: 'text',
label: '会议时长', label: '会议时长',
value: '2小时' value: '2小时'
...@@ -48,6 +53,11 @@ export default { ...@@ -48,6 +53,11 @@ export default {
value: '200' value: '200'
}, },
{ {
type: 'banner',
color: ['#F39A0E', '#F6DB0B'],
text: '证明信息'
},
{
type: 'text', type: 'text',
label: '产品名称', label: '产品名称',
value: '善存软胶囊' value: '善存软胶囊'
...@@ -62,7 +72,8 @@ export default { ...@@ -62,7 +72,8 @@ export default {
type: 'text', type: 'text',
label: '参会人员反馈', label: '参会人员反馈',
value: '积极', value: '积极',
url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841' url:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
}, },
{ {
type: 'text', type: 'text',
...@@ -77,6 +88,28 @@ export default { ...@@ -77,6 +88,28 @@ export default {
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841' 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
] ]
},
{
type: 'box',
label: '点击量(UV)',
value: [
{
label: '5月18日',
value: '12'
},
{
label: '5月22日',
value: '12'
},
{
label: '5月22日',
value: '12'
},
{
label: '5月22日',
value: '12'
}
]
} }
] ]
}; };
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!