Skip to content

E
east-nanjing-new
Commit 9d7340b3 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

小区页面布局

parent b4ffa26d
Hide whitespace changes
Inline Side-by-side
Showing with 744 additions and 24 deletions
package-lock.json
View file @ 9d7340b3
......@@ -16,6 +16,7 @@
"normalize.css": "^8.0.1",
"qs": "^6.9.6",
"vue": "^3.0.5",
"vue-router": "^4.0.6",
"vuex": "^4.0.0"
},
"devDependencies": {
......@@ -4292,6 +4293,14 @@
"node": ">=6.0.0"
}
},
"node_modules/vue-router": {
"version": "4.0.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.6.tgz?cache=0&sync_timestamp=1617697726574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.6.tgz",
"integrity": "sha1-kXUNtQfSZkLyJbDsYGRWjl/kSNY=",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-types": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/vue-types/download/vue-types-3.0.2.tgz",
......@@ -8016,6 +8025,12 @@
}
}
},
"vue-router": {
"version": "4.0.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.6.tgz?cache=0&sync_timestamp=1617697726574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.6.tgz",
"integrity": "sha1-kXUNtQfSZkLyJbDsYGRWjl/kSNY=",
"requires": {}
},
"vue-types": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/vue-types/download/vue-types-3.0.2.tgz",
......
package.json
View file @ 9d7340b3
......@@ -19,6 +19,7 @@
"normalize.css": "^8.0.1",
"qs": "^6.9.6",
"vue": "^3.0.5",
"vue-router": "^4.0.6",
"vuex": "^4.0.0"
},
"devDependencies": {
......
src/App.vue
View file @ 9d7340b3
<template>
<Main />
<router-view />
<m-loader v-if="showLoading" />
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import Main from '@/view/main.vue'
import store from '@/store'
export default defineComponent({
name: 'App',
components: { Main },
setup() {
const showLoading = computed(() => store.state.showLoading)
return {
......
src/components/MyComponent/MyCard/mode-3.vue 0 → 100644
View file @ 9d7340b3
<template>
<div class="card-wrapper">
<div class="card-title">
{{ title }}
<img class="tri" src="@/assets/images/modal-head-tri.png" />
<img class="tri" src="@/assets/images/modal-head-tri.png" />
</div>
<div class="card-content">
<slot />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import flag from '@/assets/images/card-model2-flag.png'
export interface AdditionProp {
name?: string
value?: number
unit?: string
}
export default defineComponent({
name: 'Mode3',
props: {
title: {
type: String as PropType<string>,
required: true,
},
},
setup() {
return {
flag,
}
},
})
</script>
<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
$full()
.card-title
display flex
background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
position relative
color #D0EBEC
font-family $font-zcool
font-size $card-title-size
height .2rem
padding-left .2rem
align-items center
font-size .13rem
box-sizing border-box
border-bottom .01rem solid $primary-border
.tri
position absolute
left 0
width .2rem
&:nth-of-type(2)
left auto
right 0
transform rotate(180deg)
.card-content
display flex
flex-direction column
justify-content space-around
position relative
box-sizing border-box
padding .02rem .05rem
overflow hidden !important
>div
$full()
</style>
src/components/MyComponent/MyCard/my-card.vue
View file @ 9d7340b3
......@@ -13,10 +13,11 @@ import { computed, defineComponent, PropType } from 'vue'
import MyAnimate from '../MyAnimate/my-animate.vue'
import mode1 from './mode-1.vue'
import mode2 from './mode-2.vue'
import mode3 from './mode-3.vue'
import modeBorder from './mode-border.vue'
import '../main.styl'
type ModeType = '1' | '2' | 'border'
type ModeType = '1' | '2' | '3' | 'border'
export default defineComponent({
name: 'MyCard',
......@@ -52,6 +53,8 @@ export default defineComponent({
return mode1
case '2':
return mode2
case '3':
return mode3
case 'border':
return modeBorder
default:
......
src/components/MyComponent/MyChart/my-line.vue
View file @ 9d7340b3
......@@ -38,27 +38,23 @@ export default defineComponent({
top: '20%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(47,134,238,0.3)',
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(47,134,238,0.3)',
},
},
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(47,134,238,0.3)',
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(47,134,238,0.3)',
},
},
],
},
}
const defaultSeriesItem = {
type: 'line',
......
src/main.ts
View file @ 9d7340b3
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from '@/components/MyComponent'
import router from '@/router'
import { Progress, Select, Input } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import './assets/style/reset.styl'
createApp(App)
.use(router)
.use(MyComponent)
.use(Progress)
.use(Select)
......
src/router/index.ts 0 → 100644
View file @ 9d7340b3
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router
src/router/routes.ts 0 → 100644
View file @ 9d7340b3
import Main from '@/view/main.vue'
import CommunityView from '@/view/community.vue'
export default [
{ name: 'main', path: '/', component: Main },
{ name: 'community', path: '/community', component: CommunityView },
]
src/view/community.vue 0 → 100644
View file @ 9d7340b3
<template>
<m-grid
:template="['title title title', 'left . right']"
columns="16vw auto 49vw"
rows="0.4rem auto"
gap="0.05rem"
>
<m-title area="title">南东城运</m-title>
<m-map ref="map" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftSection area="left" />
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<RightSection area="right" />
</m-animate>
</m-grid>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection },
})
</script>
<style lang="stylus" scoped></style>
src/view/community/community-photo.vue 0 → 100644
View file @ 9d7340b3
<template>
<div class="community-photo">
<div
v-for="item in list"
:key="item.name"
:style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
>
<p>{{ item.name }}</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import photo1 from '@/assets/images/community1.png'
import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png'
export default defineComponent({
name: 'CommunityPhoto',
setup() {
return {
list: [
{ name: '重庆北路205号入口', photo: photo1 },
{ name: '重庆北路205号道路', photo: photo2 },
{ name: '重庆北路205号电梯', photo: photo3 },
],
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.community-photo
$full()
display flex
flex-direction column
justify-content space-between
padding .05rem
>div
height 32%
position relative
>p
position absolute
right 0
bottom 0
padding .05rem .1rem
border-radius .1rem 0 0 0
color $secondary-color
background rgba(8,28,52,.5)
</style>
src/view/community/left-section.vue 0 → 100644
View file @ 9d7340b3
<template>
<m-card mode="border">
<m-card title="小区档案" mode="3">
<div class="info">
<div><img src="@/assets/images/zhenxing.png" /></div>
<div>
<h3>振兴小区</h3>
<p>
振兴小区建筑面积44250.0000平米，占地面积20000.0000平米，雅致的绿化，成熟的小区，营造安静且优雅的空间环境，构筑温情社区空间。对口育才幼儿园、凯乐幼儿园、蛇口启鹏幼儿园、蓓蕾幼儿园育才二中。
</p>
</div>
</div>
<div>
<Brief :list="summary.slice(0, 3)" size="0.32rem" />
<h1></h1>
<Brief :list="summary.slice(3)" size="0.32rem" />
</div>
<div class="buildings">
<div v-for="item in ['紫光大厦', '文海大楼', '振兴小区']" :key="item">
{{ item }}
</div>
</div>
<div class="address">
<div
v-for="(item, i) in addrList"
:key="i"
:style="`border-left-color: ${getColor(item.type)}`"
>
<div>
<img src="@/assets/images/p7.png" />
<p>{{ item.address }}</p>
</div>
<div>
<img src="@/assets/images/p8.png" />
{{ item.name }}
</div>
<span>{{ item.type }}</span>
<b :style="`background:${getColor(item.type)}`" />
</div>
</div>
<div class="industry">
<div class="title">
<img src="@/assets/images/p9.png" />
业委会
</div>
<div class="content">
<div v-for="item in 3" :key="item">
<p>姓名</p>
<p>XX业委会主任</p>
</div>
</div>
</div>
</m-card>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '@/view/components/brief.vue'
import p1 from '@/assets/images/p1.png'
import p2 from '@/assets/images/p2.png'
import p3 from '@/assets/images/p3.png'
import p4 from '@/assets/images/p4.png'
import p5 from '@/assets/images/p5.png'
import p6 from '@/assets/images/p6.png'
export default defineComponent({
name: 'LeftSection',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '小区数', value: 3, icon: p1 },
{ name: '总户数', value: 2715, icon: p2 },
{ name: '物业企业', value: 3, icon: p3 },
{ name: '充电桩', value: 150, icon: p4 },
{ name: '车位', value: 2500, icon: p5 },
{ name: '为老设施', value: 15, icon: p6 },
])
const addrList = ref([
{
name: '封闭',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '门岗',
},
{
name: '有门岗无值班',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '门岗',
},
{
name: '助浴点',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '充电桩',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
{
name: '停车位',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
{
name: '充电桩',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
])
const getColor = (type: string): string => {
switch (type) {
case '门岗':
return '#826AFA'
case '为老':
return '#FF6161'
case '公共':
return '#8ED617'
default:
return '#fff'
}
}
return {
summary,
addrList,
getColor,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.info
display flex
height 1.1rem
margin .05rem 0
overflow hidden
>div
flex 1
color #ccc
text-align justify
&:first-child
flex .56
$center()
background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
margin-right .05rem
> img
width 90%
&:last-child
display flex
flex-direction column
justify-content space-around
h3
color #ccc
font-size .16rem
margin 0
.buildings
display flex
justify-content space-between
>div
$center()
width 30%
height .4rem
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
.address
display flex
flex-wrap wrap
justify-content space-around
>div
width 48%
padding .05rem .07rem
box-sizing border-box
position relative
margin-bottom .05rem
background rgba(33,58,89,.2)
border .01rem solid rgba(91,213,255,.1)
border-left .02rem solid transparent
overflow hidden
>div
display flex
align-items center
p
color #aaa
&:nth-of-type(2)
margin-top .02rem
font-weight bold
img
width .15rem
margin-right .05rem
span
position absolute
right .04rem
bottom .02rem
font-size .08rem
b
position absolute
right -0.1rem
bottom -0.1rem
width .2rem
height .2rem
transform rotate(45deg)
opacity .4
.industry
.title
display flex
align-items center
font-family $font-zcool
font-size .14rem
color #ccc
img
width .18rem
height @width
margin-right .05rem
.content
display flex
justify-content space-between
>div
display flex
flex-direction column
justify-content center
padding 0 .12rem
min-height .5rem
width 31%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
p
&:nth-of-type(2)
color #aaa
</style>
src/view/community/manage-issue.vue 0 → 100644
View file @ 9d7340b3
<template>
<m-card mode="3" title="管理要素">
<div class="sum">
<div class="total">
评分
<m-count class="count" :value="92" />
</div>
<div class="safety">
安全
<m-count class="count" :value="95" />
</div>
<div class="clean">
干净
<m-count class="count" :value="92" />
</div>
<div class="order">
有序
<m-count class="count" :value="89" />
</div>
</div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
安全
<m-count class="count" :value="95" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option1" />
</div>
</div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
干净
<m-count class="count" :value="92" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option2" />
</div>
</div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
有序
<m-count class="count" :value="89" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option3" />
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
export default defineComponent({
name: 'ManageIssue',
setup() {
const data = ref<ChartTypes.DatasetComponentOption>({
dimensions: [
{ name: 'date', displayName: '日期' },
{ name: 'value', displayName: '分数' },
],
source: [
{ date: '0325', value: 60 },
{ date: '0326', value: 70 },
{ date: '0327', value: 80 },
{ date: '0328', value: 90 },
{ date: '0329', value: 80 },
{ date: '0330', value: 70 },
{ date: '0331', value: 60 },
{ date: '0401', value: 60 },
{ date: '0402', value: 70 },
{ date: '0403', value: 90 },
],
})
const option1 = ref<ChartTypes.LineOption>({
color: [['#8ED617', '#429321']],
grid: { top: '5%' },
legend: { show: false },
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(142,214,23,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(142,214,23,.1)', // 100% 处的颜色
},
],
} as any,
},
},
],
xAxis: { axisLabel: { interval: 0 } },
})
const option2 = ref<ChartTypes.LineOption>({
color: [['#00f2ff', '#05A4FF']],
grid: { top: '5%' },
legend: { show: false },
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0,242,255,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0,242,255,.1)', // 100% 处的颜色
},
],
} as any,
},
},
],
xAxis: { axisLabel: { interval: 0 } },
})
const option3 = ref<ChartTypes.LineOption>({
color: [['#ffd400', '#F77120']],
grid: { top: '5%' },
legend: { show: false },
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255,212,0,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,212,0,.1)', // 100% 处的颜色
},
],
} as any,
},
},
],
xAxis: { axisLabel: { interval: 0 } },
})
return {
data,
option1,
option2,
option3,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
position relative
height 1.4rem
background url('@/assets/images/issue-bg.png') 100% / 100% 100% no-repeat
>div
position absolute
font-size .12rem
font-weight bold
.count
font-size .15rem
font-family $font-pang
&.total
top 6%
left @top
color #ccc
&.safety
top 40%
left 22%
color #8ED617
&.clean
top 48%
left 58%
color $edge
&.order
top 20%
left 74%
color $yellow
.title
display flex
align-items center
font-family $font-zcool
font-size .14rem
color #ccc
margin-bottom .05rem
img
width .18rem
height @width
margin-right .05rem
.count
margin-left .05rem
font-family $font-pang
margin-bottom .03rem
.detail
margin-bottom .05rem
.chart
width 100%
height .8rem
&:nth-of-type(2)
.count
color #8ED617
&:nth-of-type(3)
.count
color $edge
&:nth-of-type(4)
.count
color $yellow
</style>
src/view/community/right-section.vue 0 → 100644
View file @ 9d7340b3
<template>
<div class="right-section">
<m-card mode="border">
<CommunityPhoto />
</m-card>
<m-card mode="border">
<ManageIssue />
</m-card>
<m-card mode="border"> </m-card>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import CommunityPhoto from './community-photo.vue'
import ManageIssue from './manage-issue.vue'
export default defineComponent({
name: 'RightSection',
components: { CommunityPhoto, ManageIssue },
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.right-section
$full()
display flex
justify-content space-between
>div
height 100%
width 33%
.beauty1
flex 1
.beauty2
flex 1.6
</style>
src/view/components/brief.vue
View file @ 9d7340b3
<template>
<div class="brief-container">
<div v-for="item in list" :key="item.name">
<img v-if="item.icon" :src="item.icon" />
<img
v-if="item.icon"
:src="item.icon"
:style="`width:${size};height:${size}`"
/>
<div v-if="Array.isArray(item.value)">
<div class="count-group">
<m-count class="count yellow" :value="item.value[0]" />
......@@ -41,6 +45,10 @@ export default defineComponent({
type: String as PropType<string>,
default: null,
},
size: {
type: String as PropType<string>,
default: '0.22rem',
},
},
})
</script>
......@@ -60,8 +68,6 @@ export default defineComponent({
display flex
align-items center
>img
width .22rem
height @width
margin-right .05rem
>div
font-weight bold
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment