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 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyView</title>
<title>花木街道数字孪生城市</title>
</head>
<body>
......
src/App.vue
View file @ a04b4226
......@@ -56,15 +56,14 @@ html, body
color #000
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: .05rem;
}
::-webkit-scrollbar
width .04rem
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background:rgba(91, 213, 255, 0.3)
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(91, 213, 255, 0.3)
}
::-webkit-scrollbar-thumb
background rgba(221, 80, 94, 0.5)
-webkit-box-shadow inset006pxrgba(0,0,0,0.5)
::-webkit-scrollbar-thumb:window-inactive
background rgba(221, 80, 94, 0.5)
</style>
src/components/MyComponent/main.styl
View file @ a04b4226
......@@ -24,7 +24,6 @@ $primary-color = #47B3FF
$secondary-color = #5BD5FF
$primary-bg = rgba(49,94,139,.3)
$primary-border = rgba(91,213,255,.5)
$blue = #2F86EE
$edge = #00f2ff
$yellow = #ffd400
$green = #4F953B
......@@ -50,7 +49,21 @@ $table-bg(opacity = 0.3)
$red = #dd505E
$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() {
display flex
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'
import MyComponent from '@/components/MyComponent'
import {
create,
NSpace,
NInput,
NDropdown,
NIcon,
......@@ -11,7 +12,7 @@ import {
} from 'naive-ui'
const naive = create({
components: [NInput, NDropdown, NIcon, NCollapse, NCollapseItem],
components: [NSpace, NInput, NDropdown, NIcon, NCollapse, NCollapseItem],
})
createApp(App).use(MyComponent).use(naive).mount('#app')
src/view/components/basic-info.vue
View file @ a04b4226
......@@ -21,7 +21,7 @@
<p class="title">关系在街道党员分类</p>
<div class="content">
<div class="pie">
<m-pie :option="chartOption" :dataset="data1" />
<m-pie :option="pieOption" :dataset="data1" />
</div>
<div>
<div v-for="(item, i) in data1.source" :key="item.name">
......@@ -42,7 +42,7 @@
<div class="content">
<div class="pie">
<m-pie
:option="{ ...chartOption, color: color2 }"
:option="{ ...pieOption, color: color2 }"
:dataset="data2"
/>
</div>
......@@ -92,14 +92,14 @@ const sumList = [
const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
const chartOption: ChartTypes.PieOption = {
const pieOption: ChartTypes.PieOption = {
color: color1,
legend: { show: false },
series: [
{
type: 'pie',
radius: ['60%', '78%'],
center: ['45%', '60%'],
center: ['42%', '60%'],
label: {
show: false,
},
......@@ -205,10 +205,10 @@ const clickTag = (key: string) => {
position fixed
top .48rem
left .05rem
width 29vw
width 3.4rem
#basic-info
width 100%
background rgba(249,250,250,.75)
background $bg
border-radius .02rem
$blur()
.info-wrapper
......@@ -222,7 +222,7 @@ const clickTag = (key: string) => {
justify-content space-between
margin-bottom .04rem
>div
background #fff
background $white-bg
width 32%
border-radius .04rem
padding .03rem .05rem
......@@ -230,13 +230,13 @@ const clickTag = (key: string) => {
font-size .09rem
p
&:last-child
color rgba(0,0,0,.6)
color $gray
.count
color $red
font-size .2rem
margin-right .05rem
.box
background #fff
background $white-bg
border-radius .04rem
padding .05rem .03rem
box-sizing border-box
......@@ -251,13 +251,13 @@ const clickTag = (key: string) => {
.content
flex 1
display flex
justify-content space-around
overflow hidden
>div
&.pie
width 1.4rem
height 1rem
&:last-child
flex 1
display flex
flex-direction column
justify-content center
......@@ -274,7 +274,7 @@ const clickTag = (key: string) => {
margin-right .2rem
.tag-box
background rgba(249,250,250,.75)
background $bg
$blur()
width 100%
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>
<NavBar />
<BasicInfo />
<div class="reset">
<img src="@images/reset.png" />
</div>
<InforModal class="info-modal" />
<listModal class="list-modal" />
</template>
<script lang="ts" setup>
import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue'
import InforModal from './components/info-modal.vue'
import listModal from './components/list-modal.vue'
</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