Skip to content

H
huamu
Commit a04b4226 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

info modal & list modal

parent 3302f19a
Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 25 deletions
index.html
View file @ a04b4226
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyView</title> <title>花木街道数字孪生城市</title>
</head> </head>
<body> <body>
......
src/App.vue
View file @ a04b4226
...@@ -56,15 +56,14 @@ html, body ...@@ -56,15 +56,14 @@ html, body
color #000 color #000
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
::-webkit-scrollbar { ::-webkit-scrollbar
width: .05rem; width .04rem
}
/* 滚动条滑块 */ /* 滚动条滑块 */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb
background:rgba(91, 213, 255, 0.3) background rgba(221, 80, 94, 0.5)
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5); -webkit-box-shadow inset006pxrgba(0,0,0,0.5)
}
::-webkit-scrollbar-thumb:window-inactive { ::-webkit-scrollbar-thumb:window-inactive
background:rgba(91, 213, 255, 0.3) background rgba(221, 80, 94, 0.5)
}
</style> </style>
src/components/MyComponent/main.styl
View file @ a04b4226
...@@ -24,7 +24,6 @@ $primary-color = #47B3FF ...@@ -24,7 +24,6 @@ $primary-color = #47B3FF
$secondary-color = #5BD5FF $secondary-color = #5BD5FF
$primary-bg = rgba(49,94,139,.3) $primary-bg = rgba(49,94,139,.3)
$primary-border = rgba(91,213,255,.5) $primary-border = rgba(91,213,255,.5)
$blue = #2F86EE
$edge = #00f2ff $edge = #00f2ff
$yellow = #ffd400 $yellow = #ffd400
$green = #4F953B $green = #4F953B
...@@ -50,7 +49,21 @@ $table-bg(opacity = 0.3) ...@@ -50,7 +49,21 @@ $table-bg(opacity = 0.3)
$red = #dd505E $red = #dd505E
$light-red = #FCF4F5 $light-red = #FCF4F5
$blue = #3D7FE9
$light-blue = #ECEFFA
$gray = rgba(0,0,0,.6)
$bg = rgba(249,250,250,.75)
$white-bg = #f7f7f7
$flex-align() { $flex-align() {
display flex display flex
align-items center align-items center
} }
$text-overflow() {
overflow hidden
white-space nowrap
text-overflow ellipsis
}
\ No newline at end of file
src/main.ts
View file @ a04b4226
...@@ -3,6 +3,7 @@ import App from './App.vue' ...@@ -3,6 +3,7 @@ import App from './App.vue'
import MyComponent from '@/components/MyComponent' import MyComponent from '@/components/MyComponent'
import { import {
create, create,
NSpace,
NInput, NInput,
NDropdown, NDropdown,
NIcon, NIcon,
...@@ -11,7 +12,7 @@ import { ...@@ -11,7 +12,7 @@ import {
} from 'naive-ui' } from 'naive-ui'
const naive = create({ const naive = create({
components: [NInput, NDropdown, NIcon, NCollapse, NCollapseItem], components: [NSpace, NInput, NDropdown, NIcon, NCollapse, NCollapseItem],
}) })
createApp(App).use(MyComponent).use(naive).mount('#app') createApp(App).use(MyComponent).use(naive).mount('#app')
src/view/components/basic-info.vue
View file @ a04b4226
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<p class="title">关系在街道党员分类</p> <p class="title">关系在街道党员分类</p>
<div class="content"> <div class="content">
<div class="pie"> <div class="pie">
<m-pie :option="chartOption" :dataset="data1" /> <m-pie :option="pieOption" :dataset="data1" />
</div> </div>
<div> <div>
<div v-for="(item, i) in data1.source" :key="item.name"> <div v-for="(item, i) in data1.source" :key="item.name">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<div class="content"> <div class="content">
<div class="pie"> <div class="pie">
<m-pie <m-pie
:option="{ ...chartOption, color: color2 }" :option="{ ...pieOption, color: color2 }"
:dataset="data2" :dataset="data2"
/> />
</div> </div>
...@@ -92,14 +92,14 @@ const sumList = [ ...@@ -92,14 +92,14 @@ const sumList = [
const color1 = ['#FAADB8', '#C1474F', '#6D2C29'] const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29'] const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
const chartOption: ChartTypes.PieOption = { const pieOption: ChartTypes.PieOption = {
color: color1, color: color1,
legend: { show: false }, legend: { show: false },
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['60%', '78%'], radius: ['60%', '78%'],
center: ['45%', '60%'], center: ['42%', '60%'],
label: { label: {
show: false, show: false,
}, },
...@@ -205,10 +205,10 @@ const clickTag = (key: string) => { ...@@ -205,10 +205,10 @@ const clickTag = (key: string) => {
position fixed position fixed
top .48rem top .48rem
left .05rem left .05rem
width 29vw width 3.4rem
#basic-info #basic-info
width 100% width 100%
background rgba(249,250,250,.75) background $bg
border-radius .02rem border-radius .02rem
$blur() $blur()
.info-wrapper .info-wrapper
...@@ -222,7 +222,7 @@ const clickTag = (key: string) => { ...@@ -222,7 +222,7 @@ const clickTag = (key: string) => {
justify-content space-between justify-content space-between
margin-bottom .04rem margin-bottom .04rem
>div >div
background #fff background $white-bg
width 32% width 32%
border-radius .04rem border-radius .04rem
padding .03rem .05rem padding .03rem .05rem
...@@ -230,13 +230,13 @@ const clickTag = (key: string) => { ...@@ -230,13 +230,13 @@ const clickTag = (key: string) => {
font-size .09rem font-size .09rem
p p
&:last-child &:last-child
color rgba(0,0,0,.6) color $gray
.count .count
color $red color $red
font-size .2rem font-size .2rem
margin-right .05rem margin-right .05rem
.box .box
background #fff background $white-bg
border-radius .04rem border-radius .04rem
padding .05rem .03rem padding .05rem .03rem
box-sizing border-box box-sizing border-box
...@@ -251,13 +251,13 @@ const clickTag = (key: string) => { ...@@ -251,13 +251,13 @@ const clickTag = (key: string) => {
.content .content
flex 1 flex 1
display flex display flex
justify-content space-around
overflow hidden overflow hidden
>div >div
&.pie &.pie
width 1.4rem width 1.4rem
height 1rem height 1rem
&:last-child &:last-child
flex 1
display flex display flex
flex-direction column flex-direction column
justify-content center justify-content center
...@@ -274,7 +274,7 @@ const clickTag = (key: string) => { ...@@ -274,7 +274,7 @@ const clickTag = (key: string) => {
margin-right .2rem margin-right .2rem
.tag-box .tag-box
background rgba(249,250,250,.75) background $bg
$blur() $blur()
width 100% width 100%
height .3rem height .3rem
......
src/view/components/info-modal.vue 0 → 100644
View file @ a04b4226
<template>
<div class="info">
<p class="title">某某党组织</p>
<n-space>
<span class="tag red">荣获区级奖项党组织</span>
<span class="tag blue">荣获市级及以上奖项党组织</span>
</n-space>
<p>上海市浦东新区梅花路1099号</p>
<div class="box flex">
<div>
<span>党员数量</span>
<p>1000</p>
</div>
<div>
<span>党委书记</span>
<p>刘某某</p>
</div>
</div>
<div class="box">
<div>
<span>党委副书记</span>
<p>陈某某</p>
</div>
<div>
<span>上级党组织名称</span>
<p>xxxxxx</p>
</div>
<div>
<span>联系电话</span>
<p>189********</p>
</div>
</div>
</div>
</template>
<script lang="ts" setup></script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.info
background $bg
$blur()
border-radius .04rem
box-sizing border-box
padding .1rem
max-width 3rem
max-height 44vh
.title
font-size .13rem
font-family $font-ping-medium
.tag
display inline-block
box-sizing border-box
padding .02rem .06rem
font-size .08rem
margin .05rem 0
border-radius .03rem
font-family $font-ping-medium
&.red
background $light-red
color $red
&.blue
background $light-blue
color $blue
.box
background $bg
border-radius .03rem
margin-top .05rem
box-sizing border-box
padding .1rem
&.flex
display flex
>div
margin-right .2rem
span
color $gray
p
margin-bottom .03rem
font-family $font-ping-medium
</style>
src/view/components/list-modal.vue 0 → 100644
View file @ a04b4226
<template>
<div class="list">
<p class="title">此处12个XXXX</p>
<div class="wrapper">
<div v-for="(item, i) in list" :key="i" class="item">
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const list = [
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.list
background $bg
$blur()
border-radius .04rem
box-sizing border-box
padding .1rem .08rem
max-width 3rem
max-height 44vh
display flex
flex-direction column
.title
font-size .12rem
border-bottom .01rem solid rgba(0,0,0,.06)
padding 0 .08rem .05rem
.wrapper
flex 1
overflow-y auto
.item
border-radius .03rem
position relative
background transparent
cursor pointer
box-sizing border-box
padding .05rem .08rem
p
font-family $font-ping-medium
$text-overflow()
span
color $gray
$text-overflow()
.icon
display none
position absolute
top 0
bottom 0
right 0
margin auto .1rem
&:hover
background $light-red
&>.icon
display inline-block
</style>
src/view/main.vue
View file @ a04b4226
<template> <template>
<NavBar /> <NavBar />
<BasicInfo /> <BasicInfo />
<div class="reset">
<img src="@images/reset.png" />
</div>
<InforModal class="info-modal" />
<listModal class="list-modal" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import NavBar from './components/nav-bar.vue' import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue' import BasicInfo from './components/basic-info.vue'
import InforModal from './components/info-modal.vue'
import listModal from './components/list-modal.vue'
</script> </script>
<style lang="stylus"></style> <style lang="stylus">
@import '../components/MyComponent/main.styl'
.reset
height .3rem
width @height
border-radius .02rem
position fixed
top .48rem
left 3.5rem
background $white-bg
box-sizing border-box
$center()
cursor pointer
&:hover
>img
transform scale(1.2)
>img
width .14rem
height @width
transition transform .3s ease-in-out
.info-modal
position fixed
top 0
bottom 0
left 0
right 0
margin auto
.list-modal
position fixed
top 0
bottom 0
left 0
right 0
margin auto
margin-left 8rem
</style>
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