Browse Source

诉求接办样式

master
李素 1 year ago
parent
commit
2d61cd154f
  1. 38
      src/assets/css/common.less
  2. BIN
      src/assets/images/icon/address.png
  3. BIN
      src/assets/images/icon/content.png
  4. BIN
      src/assets/images/icon/time.png
  5. 2
      src/plugins/vant.js
  6. 5
      src/router/router.config.js
  7. 69
      src/views/assistance/index.vue
  8. 6
      src/views/mine/index.vue

38
src/assets/css/common.less

@ -27,7 +27,7 @@
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.3); box-shadow: 0 1px 3px rgba(0,0,0,.3);
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: auto;
} }
.flex{ .flex{
display: flex; display: flex;
@ -43,21 +43,55 @@
&-center2{ &-center2{
align-items: center; align-items: center;
} }
&-center3{
align-items: flex-start;
}
&-mean{ &-mean{
justify-content: space-around; justify-content: space-around;
} }
&-end{ &-end{
justify-content: space-between; justify-content: space-between;
} }
&-fend{
justify-content: flex-end;
}
} }
.m-top12{ .m-top12{
margin-top: 12px; margin-top: 12px;
&-left{
margin-left: 12px;
}
&-right{
margin-right: 12px;
}
}
.m-top5{
margin-top: 5px;
&-bottom{
margin-bottom: 5px;
}
} }
.font-size13{ .font-size13{
font-size: 13px; font-size: 13px;
} }
.text-blue{ .text-blue{
color:#3e92ff; color:#3e92ff;
} }
.pages {
width: 100%;
height: 100vh;
background-color: #f7f7f7;
}
.rounded-corner {
border-radius: 20px;
}
.opacity5 {
opacity: 0.5;
}
.small_img{
width: 18px;
}

BIN
src/assets/images/icon/address.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/icon/content.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 953 B

BIN
src/assets/images/icon/time.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 912 B

2
src/plugins/vant.js

@ -24,7 +24,7 @@ import {
List, List,
ActionSheet, ActionSheet,
Checkbox, Checkbox,
CellGroup CellGroup
} from 'vant' } from 'vant'
Vue.use(Button) Vue.use(Button)

5
src/router/router.config.js

@ -12,5 +12,10 @@ export const constantRouterMap = [
path: '/mine', path: '/mine',
component: () => import('@/views/mine'), component: () => import('@/views/mine'),
meta: { title: '我的', keepAlive: false } meta: { title: '我的', keepAlive: false }
},
{
path: '/assistance',
component: () => import('@/views/assistance'),
meta: { title: '诉求代办', keepAlive: false }
} }
] ]

69
src/views/assistance/index.vue

@ -0,0 +1,69 @@
<template>
<div class='pages'>
<div>
<van-tabs :active="active" bind:change="onChange">
<van-tab title="待接单">内容 1</van-tab>
<van-tab title="待处理">内容 2</van-tab>
<van-tab title="已完成">内容 3</van-tab>
</van-tabs>
</div>
<div class="card rounded-corner">
<div class="m-top12 flex">
<van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
<van-tag type="warning" class="m-top12 m-top12-left">共性需求</van-tag>
<div class="m-top12 m-top12-left opacity5 font-size13">
公益事业类-社区困难群体生活帮扶
</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/address.png" class="small_img">
张玉宝 13636520003<br>
<div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101</div>
</div>
<div class="m-top5 m-top12-left">
<img src="@/assets/images/icon/time.png" class="small_img">
2024-05-0215:00
</div>
<div class="m-top5 m-top12-left">
<div class="flex flex-center3">
<img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
<div>社区86岁独居老人上下楼不方便需要上门进行送餐服务</div>
</div>
</div>
<hr class="m-top12-left m-top12-right opacity5">
<div class="flex flex-fend m-top12-right">
<van-button size="small" type="info" class="rounded-corner m-top5-bottom"
style="width: 60px;">接单</van-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 1,
};
},
created() {
},
methods: {
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none',
});
},
},
components: {},
computed: {},
watch: {}
}
</script>
<style lang='less' scoped>
</style>

6
src/views/mine/index.vue

@ -45,11 +45,7 @@ export default {
</script> </script>
<style lang='less'> <style lang='less'>
.pages { .heard {
width: 100%;
height: 100vh;
background-color: #f7f7f7;
}.heard {
width: 100%; width: 100%;
height: 35vh; height: 35vh;
background: linear-gradient(to bottom, background: linear-gradient(to bottom,

Loading…
Cancel
Save