Skip to content

J
jingan-wisdom
Commit a71467bb authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

物业体征

parent 867708fe
Show whitespace changes
Inline Side-by-side
Showing with 305 additions and 64 deletions
src/App.vue
View file @ a71467bb
......@@ -48,10 +48,17 @@ html, body
font-size .1rem
background url('/src/assets/images/map.png') center/100% 100% no-repeat
color #fff
.orange-count
font-size .16rem
font-weight bold
background-clip text
-webkit-background-clip text
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: .05rem;
width: .04rem;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
......
src/components/MyComponent/MyCard/mode1.vue
View file @ a71467bb
......@@ -29,7 +29,7 @@ export default defineComponent({
<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
background rgba(29,42,65,.9)
background rgba(29,42,65,.8)
.card-title
display flex
align-items center
......@@ -57,6 +57,7 @@ export default defineComponent({
display flex
flex-direction column
justify-content space-around
$blur(0.01rem)
>div
$full()
</style>
src/components/MyComponent/MyCard/my-card.vue
View file @ a71467bb
......@@ -78,5 +78,4 @@ export default defineComponent({
height calc(100% - .2rem)
overflow-y auto
overflow-x hidden
$blur()
</style>
src/components/MyComponent/MySub/my-sub.vue
View file @ a71467bb
<template>
<div class="my-sub">
<div class="title">
<div
class="title"
:class="{ 'click-able': clickAble }"
@click="handleClick"
>
<span />
<p><slot /></p>
<div v-if="addition" class="addition">
<MyCount v-if="addition.value" class="count" :value="addition.value" />
<MyCount
v-if="addition.value"
class="count orange-count"
:value="addition.value"
/>
<span v-if="addition.unit">{{ addition.unit }}</span>
<!-- <img src="@/assets/images/title-dec.png" /> -->
</div>
<div v-if="searchAble" class="search-container">
<input
v-if="searchAble"
v-model="inputValue"
:class="{ open: isOpened }"
class="search-bar"
......@@ -16,14 +25,22 @@
@keypress.enter="handleSearch"
/>
<img
v-if="searchAble"
v-show="isOpened"
class="close-btn"
src="@/assets/images/close-btn2.png"
draggable="false"
@click.prevent="handleClose"
/>
<img
class="search-btn"
src="@/assets/images/search.png"
draggable="false"
@click.prevent="handleOpenSearchBar"
/>
</div>
<img src="@/assets/images/sub-dot.png" draggable="false" />
</div>
<!-- <img src="@/assets/images/sub-dot.png" draggable="false" /> -->
<span class="dot" />
</div>
</template>
......@@ -49,14 +66,22 @@ export default defineComponent({
type: Boolean as PropType<boolean>,
default: false,
},
clickAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['search'],
emits: ['search', 'close', 'select'],
setup(props, ctx) {
const isOpened = ref(false)
const inputValue = ref('')
const handleSearch = () => {
ctx.emit('search', inputValue.value.trim())
}
const handleClose = () => {
inputValue.value = ''
ctx.emit('close')
}
const handleOpenSearchBar = () => {
if (!isOpened.value) {
isOpened.value = true
......@@ -68,11 +93,18 @@ export default defineComponent({
}
}
}
const handleClick = () => {
if (props.clickAble) {
ctx.emit('select')
}
}
return {
isOpened,
inputValue,
handleSearch,
handleClose,
handleOpenSearchBar,
handleClick,
}
},
})
......@@ -83,32 +115,41 @@ export default defineComponent({
.my-sub
display flex
align-items center
border-bottom .01rem solid rgba(105,110,114,.5)
margin-bottom .03rem
>.title
display flex
align-items center
font-family $font-zcool
color $secondary-color
// color $secondary-color
flex 1
font-size .13rem
>span
display inline-block
width .02rem
height @width
background $secondary-color
margin-right .05rem
&.click-able
cursor pointer
&:hover
color $yellow
.addition
display flex
align-items center
margin-left .1rem
.count
color $yellow
// color $orange
font-size .15rem
font-family $font-pang
font-family $font-barlow
padding-bottom .03rem
span
color #aaa
font-size .08rem
margin-left .05rem
img
width .3rem
margin-left .1rem
.search-container
display flex
align-items center
position relative
&:hover
.close-btn
display inline-block
.search-bar
display block
width 0
......@@ -124,17 +165,31 @@ export default defineComponent({
transition all .3s ease-in-out
opacity 0
&.open
width 1rem
padding .02rem .05rem
width 1.6rem
padding .02rem .16rem .02rem .05rem
border .01rem solid $blue
opacity 1
.search-btn
width .14rem
height @width
cursor pointer
transition transform .3s ease-in-out
transition transform .2s ease-in-out
&:hover
transform scale(1.3) rotate(360deg)
>img
width .6rem
.close-btn
display none
width .08rem
height @width
cursor pointer
position absolute
right .24rem
transition transform .2s ease-in-out
&:hover
transform scale(1.3) rotate(360deg)
>.dot
display inline-block
width 0
height @width
border .05rem solid transparent
border-right-color #FFB560
</style>
src/components/MyComponent/main.styl
View file @ a71467bb
......@@ -27,6 +27,7 @@ $edge = #00f2ff
$yellow = #ffd400
$green = #4F953B
$edge = #00f2ff
$orange = #F7933E
$card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
$card-title-color = #fff
......@@ -42,3 +43,7 @@ $font-color = #70A7E0
$table-bg(opacity = 0.3)
rgba(0, 118, 255, opacity )
$card-bg2(opacity = 0.4, shadow = 0.2)
background rgba(70,83,97,opacity)
box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,shadow)
border-radius .03rem
\ No newline at end of file
src/utils/component-list.ts
View file @ a71467bb
import Property from '@/view/components/property.vue' // 物业
import PropertyFeatures from '@/view/components/property-features.vue' // 物业体征
export default {
w1: Property,
w2: PropertyFeatures,
}
src/view/components/brief.vue
View file @ a71467bb
......@@ -63,6 +63,7 @@ export default defineComponent({
display flex
align-items center
white-space nowrap
flex-wrap wrap
.count
font-family $font-barlow
font-size .14rem
......@@ -71,8 +72,7 @@ export default defineComponent({
>div
display flex
align-items center
flex 1
margin-left .05rem
width 33%
>img
margin-right .05rem
>div
......
src/view/components/component-modal.vue
View file @ a71467bb
......@@ -61,7 +61,7 @@ watch(
const curTab = ref('1')
const tabs = [
{ name: '物业', key: '1', list: ['w1'] },
{ name: '物业', key: '1', list: ['w1', 'w2'] },
{ name: '市场', key: '2', list: [] },
{ name: '修缮', key: '3', list: [] },
{ name: '保障', key: '4', list: [] },
......@@ -93,6 +93,7 @@ const onSelect = (key: string) => {
position relative
cursor pointer
border .01rem solid transparent
margin-bottom .05rem
&:hover
border .01rem solid $primary-border
&.checked
......
src/view/components/property-features.vue 0 → 100644
View file @ a71467bb
<template>
<m-card title="物业体征">
<m-sub :addition="{ value: 1674, unit: '个小区' }"> 住宅房屋 </m-sub>
<Brief :list="summary" />
<m-sub :addition="{ value: 1264, unit: '个' }"> 物业企业 </m-sub>
<m-sub :addition="{ value: 1015, unit: '个' }"> 业委会 </m-sub>
<m-sub :addition="{ value: 1684, unit: '万元' }"> 维修资金 </m-sub>
<Summary title="续筹分布" :list="list" :avatar="avatar1" />
</m-card>
</template>
<script lang="ts" setup>
import icon4 from '@/assets/images/icon4.png'
import icon5 from '@/assets/images/icon5.png'
import icon1 from '@/assets/images/icon1.png'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
import avatar1 from '@/assets/images/avatar1.png'
import Brief from './brief.vue'
import Summary from './summary.vue'
const summary = [
{ icon: icon4, name: '商品房', value: 904 },
{ icon: icon5, name: '公房', value: 400 },
{ icon: icon1, name: '私房/农房', value: 130 },
{ icon: icon6, name: '商住混合', value: 82 },
{ icon: icon7, name: '军产', value: 12 },
{ icon: icon8, name: '保障房', value: 46 },
]
const list = [
{ name: '分户', value: 47520 },
{ name: '门牌', value: 3960 },
{ name: '小区', value: 45 },
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
</style>
src/view/components/summary.vue 0 → 100644
View file @ a71467bb
<template>
<div class="summary">
<p v-if="title">{{ title }}</p>
<div
class="summary-container"
:class="{ 'over-two': list.length > 3, 'click-able': clickAble }"
@click="handleClick"
>
<div v-for="(item, i) in list" :key="item.name">
<p>
<img v-if="avatar && i === 0" :src="avatar" />
<m-count class="count orange-count" :value="item.value" />
<span class="unit">{{ item.unit }}</span>
</p>
<p>{{ item.name }}</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export interface SummaryProp {
name: string
value: number
unit?: string
}
export default defineComponent({
name: 'Summary',
props: {
title: {
type: String as PropType<string>,
default: '',
},
list: {
type: Array as PropType<SummaryProp[]>,
required: true,
},
avatar: {
type: String as PropType<string>,
default: null,
},
clickAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['select'],
setup(props, ctx) {
const handleClick = () => {
if (props.clickAble) {
ctx.emit('select')
}
}
return { handleClick }
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$create-border()
content ''
display block
height 40%
width .01rem
background #aaa
position absolute
top 0
bottom 0
margin auto 0
left -100%
.summary
width 100%
min-height .4rem
$card-bg2()
padding .06rem 0
>p
margin-left .1rem
font-weight bold
.summary-container
display flex
align-items center
justify-content space-around
box-sizing border-box
&.click-able
cursor pointer
&:hover
background rgba(70,83,97,0.5)
box-shadow none
&.over-two
>div
&:nth-last-child(2)
&:before
$create-border()
>div
text-align center
position relative
&:first-child
padding-left .5rem
&:last-child
&:before
$create-border()
p
.count
font-family $font-barlow
font-size .12rem
margin-right .01rem
color $orange
.unit
color #aaa
font-size .09rem
&:last-child
font-weight bold
color #ccc
>img
position absolute
left 0
top 0
bottom 0
margin auto 0
width .26rem
</style>
src/view/main.vue
View file @ a71467bb
......@@ -12,6 +12,7 @@
:key="index"
class="box"
:area="`box${index + 1}`"
:class="{ done: !!components[index] }"
>
<component
:is="componentList[components[index]]"
......@@ -57,8 +58,13 @@ const {
border-radius .02rem
border .01rem dashed #4270B3
background rgba(54,65,77,.5)
$blur(.01rem)
$blur(0.01rem)
position relative
overflow hidden
&.done
border none
background transparent
$blur(0)
>.add-btn
width .2rem
height @width
......
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