Skip to content

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

改造modal

parent b4c389b8
Show whitespace changes
Inline Side-by-side
Showing with 90 additions and 443 deletions
src/App.vue
View file @ 3e987c02
...@@ -46,7 +46,7 @@ html, body ...@@ -46,7 +46,7 @@ html, body
height 100% height 100%
overflow hidden overflow hidden
font-size .1rem font-size .1rem
background url('/src/assets/images/background.jpg') center/cover no-repeat background url('/src/assets/images/map.png') center/100% 100% no-repeat
color #fff color #fff
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
......
src/assets/images/title-bg.png 100755 → 100644
View replaced file @ b4c389b8 View file @ 3e987c02
src/assets/images/title-bg.png

361 KB | W: | H:

src/assets/images/title-bg.png

85.1 KB | W: | H:

src/assets/images/title-bg.png
src/assets/images/title-bg.png
src/assets/images/title-bg.png
src/assets/images/title-bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MyComponent/MyDrawer/my-drawer.vue
View file @ 3e987c02
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<img <img
src="@/assets/images/close-btn3.png" src="@/assets/images/close-btn3.png"
class="close-btn" class="close-btn"
draggable="false" :draggable="false"
@click="closeDrawer" @click="closeDrawer"
/> />
<div class="content"><slot /></div> <div class="content"><slot /></div>
......
src/components/MyComponent/MyModal/my-modal.vue
View file @ 3e987c02
...@@ -13,34 +13,21 @@ ...@@ -13,34 +13,21 @@
> >
<div <div
class="my-modal" class="my-modal"
:style="`width:${width};transform: translateX(${offset})`" :style="`width:${width};height:${height};transform: translate(${offsetX},${offsetY})`"
> >
<head> <head>
<span class="dot" />
<p> <p>
{{ title }} {{ title }}
<span class="left" />
<span class="right" />
</p> </p>
<div>
<img <img
src="/src/assets/images/modal-flag.png" src="/src/assets/images/close-btn4.png"
draggable="false"
class="flag"
/>
<img
src="/src/assets/images/close-btn.png"
draggable="false" draggable="false"
class="close-btn" class="close-btn"
@click.prevent="closeModal" @click.prevent="closeModal"
/> />
</div>
<img
src="/src/assets/images/modal-title-left.png"
draggable="false"
class="left"
/>
</head> </head>
<div class="content"> <div class="content" :style="`background: ${bgColor}`">
<slot /> <slot />
</div> </div>
</div> </div>
...@@ -83,11 +70,26 @@ export default defineComponent({ ...@@ -83,11 +70,26 @@ export default defineComponent({
type: String as PropType<string>, type: String as PropType<string>,
default: '32%', default: '32%',
}, },
/** 高度 */
height: {
type: String as PropType<string>,
default: 'auto',
},
/** 偏移 */ /** 偏移 */
offset: { offsetX: {
type: String as PropType<string>, type: String as PropType<string>,
default: '0', default: '0',
}, },
/** 偏移 */
offsetY: {
type: String as PropType<string>,
default: '0',
},
/** 背景色 */
bgColor: {
type: String as PropType<string>,
default: 'initial',
},
/** 点击蒙层是否允许关闭 */ /** 点击蒙层是否允许关闭 */
maskClosable: { maskClosable: {
type: Boolean as PropType<boolean>, type: Boolean as PropType<boolean>,
...@@ -119,62 +121,43 @@ export default defineComponent({ ...@@ -119,62 +121,43 @@ export default defineComponent({
z-index 9999 z-index 9999
$center() $center()
.my-modal .my-modal
background rgba(0,0,0,0.1)
color #fff color #fff
$blur() $blur()
z-index 99999 z-index 99999
head head
position relative height .3rem
height .4rem
display flex display flex
align-items center align-items center
justify-content space-between justify-content space-between
padding 0 .1rem padding 0 .1rem
margin-bottom .05rem background linear-gradient(to right, rgba(59,85,102,.8), transparent)
background-image repeating-linear-gradient(45deg, $blue, $blue, .01rem, transparent .01rem, transparent .08rem) position relative
$border($blue)
>p >p
font-size .12rem font-size .12rem
font-weight bold font-weight bold
padding .02rem .05rem .dot
position relative display inline-block
border-bottom .01rem solid $blue width .02rem
span height .2rem
background #fadb71
position absolute position absolute
width .04rem top 0
height @width bottom 0
background $edge left 0
bottom -(@height / 2) margin auto
&.left >.close-btn
left -(@width / 2) width .1rem
&.right
right -(@width / 2)
>div
display flex
align-items center
img
z-index 9
&.close-btn
width .2rem
height @width height @width
cursor pointer cursor pointer
margin-left .05rem margin-left .05rem
transition transform .3s ease-in-out transition transform .2s ease-in-out
&:hover &:hover
transform rotate(90deg) transform rotate(90deg)
&.flag
height .2rem
&.left
position absolute
left -0.01rem
height 80%
.content .content
min-height 30vh height calc(100% - .3rem)
max-height 80vh box-sizing border-box
padding .1rem padding .1rem
overflow-y auto overflow-y auto
overflow-x hidden overflow-x hidden
$border($blue)
border-top none
font-size .1rem font-size .1rem
</style> </style>
src/components/MyComponent/MyTitle/my-title.vue
View file @ 3e987c02
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
<div class="my-title"> <div class="my-title">
<img :src="bgImg" class="bg" /> <img :src="bgImg" class="bg" />
<div class="date">{{ date }} {{ time }}</div> <div class="date">{{ date }} {{ time }}</div>
<img
src="@/assets/images/filter.png"
class="filter"
draggable="false"
@click.prevent.stop="handleClick"
/>
<h1><slot /></h1> <h1><slot /></h1>
</div> </div>
</template> </template>
...@@ -21,7 +27,8 @@ export default defineComponent({ ...@@ -21,7 +27,8 @@ export default defineComponent({
default: bgImg, default: bgImg,
}, },
}, },
setup() { emits: ['touch'],
setup(_, ctx) {
const date = ref(getDate()) const date = ref(getDate())
const time = ref('') const time = ref('')
const timer = ref<NodeJS.Timer | null>(null) const timer = ref<NodeJS.Timer | null>(null)
...@@ -32,10 +39,12 @@ export default defineComponent({ ...@@ -32,10 +39,12 @@ export default defineComponent({
clearInterval(Number(timer)) clearInterval(Number(timer))
timer.value = null timer.value = null
}) })
const handleClick = () => ctx.emit('touch')
return { return {
date, date,
time, time,
timer, timer,
handleClick,
} }
}, },
}) })
...@@ -49,12 +58,24 @@ export default defineComponent({ ...@@ -49,12 +58,24 @@ export default defineComponent({
position relative position relative
background-size cover background-size cover
background-position center background-position center
font-weight bold
.date .date
z-index 2 z-index 2
position absolute position absolute
top .07rem top .12rem
right 3% right 1%
color #45F7EF
.filter
z-index 2
position absolute
top .08rem
left 1%
width .24rem
height @width
cursor pointer
opacity .8
transition opacity .2s ease-in-out
&:hover
opacity 1
.bg .bg
position absolute position absolute
$full() $full()
...@@ -65,7 +86,9 @@ export default defineComponent({ ...@@ -65,7 +86,9 @@ export default defineComponent({
background-clip text background-clip text
-webkit-background-clip text -webkit-background-clip text
-webkit-text-fill-color transparent -webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #B3EBFF) background-image linear-gradient(to bottom, #fff 40%, #0064d3)
font-size .2rem font-size .2rem
letter-spacing .05rem letter-spacing .05rem
font-family $font-pang
font-weight normal
</style> </style>
src/components/MyComponent/util.ts
View file @ 3e987c02
...@@ -13,7 +13,8 @@ export const withInstall = <T>(comp: T): T & Plugin => { ...@@ -13,7 +13,8 @@ export const withInstall = <T>(comp: T): T & Plugin => {
return comp as T & Plugin return comp as T & Plugin
} }
export const getDate = (): string => dayjs().format('YYYY-MM-DD dddd') export const getDate = (): string => dayjs().format('ll')
// export const getDate = (): string => dayjs().format('YYYY-MM-DD dddd')
export const getTime = (): string => dayjs().format('LTS') export const getTime = (): string => dayjs().format('LTS')
export const toRGB = (c: string, opacity = 1): string => { export const toRGB = (c: string, opacity = 1): string => {
......
src/view/main.vue
View file @ 3e987c02
...@@ -10,149 +10,23 @@ ...@@ -10,149 +10,23 @@
columns="1fr 1.5fr 1fr" columns="1fr 1.5fr 1fr"
rows="0.4rem 1fr 0.5fr 0.5fr 1fr" rows="0.4rem 1fr 0.5fr 0.5fr 1fr"
> >
<m-title area="title" @click="handleClick">XXX数据平台</m-title> <m-title area="title" @touch="showFilterModal = true">静安智慧房管</m-title>
<m-card area="box1" title="Box1"> <m-modal
<!-- <TestComponent2 /> --> v-model="showFilterModal"
<!-- <div :component="com"></div> --> title="布局设定"
<component :is="com"></component> width="98vw"
</m-card> height="92vh"
<m-card area="box2" title="Box2"> offset-y=".2rem"
<m-empty v-if="!show"></m-empty> bg-color="rgba(0,0,0,0.5)"
<m-bar :dataset="chartData" :option="chartOption" />
</m-card>
<m-card
v-show="show"
area="box3"
title="Box3"
enter="fadeInRight"
leave="fadeOutRight"
> >
<m-table 123
:template="[ </m-modal>
'标题1|标题2*2|标题3*2',
'key1|key2>customFormatter|key3#image',
]"
:data="tableData"
:formatter="{ customFormatter }"
/>
</m-card>
<m-card area="box4" :title="`Box${boxNumber}`">
<TestComponent @select="(val) => (boxNumber += val * 2)" />
</m-card>
</m-grid> </m-grid>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent, ref, shallowRef } from 'vue' import { ref } from 'vue'
import TestComponent from './test-component.vue' const showFilterModal = ref(false)
import TestComponent2 from './test-component2.vue'
import { ChartTypes } from '@/components/MyComponent'
import store from '@/store'
interface TableDataProps {
[propName: string]: string
}
export default defineComponent({
name: 'Main',
components: { TestComponent, TestComponent2 },
setup() {
const show = ref(false)
const chartData = ref<ChartTypes.DatasetComponentOption | null>(null)
const chartOption = ref<ChartTypes.BarOption>({
color: [['#5BD5FF', '#826AFA'], ['#FFCE34', 'red'], '#7BFFB3'],
series: [
{
type: 'bar',
barWidth: '30%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar',
barWidth: '30%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
},
],
})
const boxNumber = ref(4)
const tableData = ref<TableDataProps[]>([])
setTimeout(() => {
show.value = true
tableData.value = [
{
key1: 'key1',
key2: 'key2',
key3: 'https://avatars2.githubusercontent.com/u/43328103?v=4',
},
{
key1: 'key1',
key2: 'key2',
key3: 'https://avatars2.githubusercontent.com/u/43328103?v=4',
},
{
key1: 'key1',
key2: 'key2',
key3: 'https://avatars2.githubusercontent.com/u/43328103?v=4',
},
{
key1: 'key1',
key2: 'key2',
key3: 'https://avatars2.githubusercontent.com/u/43328103?v=4',
},
]
chartData.value = {
dimensions: [
{ name: 'date', displayName: '日期' },
{ name: 'data1', displayName: '发现数' },
{ name: 'data2', displayName: '处置数' },
{ name: 'data3', displayName: '结案数' },
],
source: [
{ date: '11日', data1: 100, data2: 100, data3: 100 },
{ date: '12日', data1: 110, data2: 110, data3: 120 },
{ date: '13日', data1: 120, data2: 130, data3: 140 },
{ date: '14日', data1: 130, data2: 140, data3: 160 },
{ date: '15日', data1: 140, data2: 150, data3: 180 },
{ date: '16日', data1: 150, data2: 160, data3: 190 },
{ date: '17日', data1: 150, data2: 160, data3: 190 },
{ date: '18日', data1: 150, data2: 160, data3: 190 },
],
}
}, 3000)
const customFormatter = (val: string) => {
return val + '哈哈哈'
}
// const com = computed(() => store.state.com)
const com = shallowRef<any>(null)
function handleClick() {
console.log('123')
// store.commit('SET_COM', TestComponent2)
com.value = TestComponent2
}
return {
show,
tableData,
customFormatter,
chartData,
chartOption,
boxNumber,
com,
handleClick,
}
},
})
</script> </script>
<style lang="stylus"></style> <style lang="stylus"></style>
src/view/test-component.vue deleted 100644 → 0
View file @ b4c389b8
<template>
<div class="test-component">
<m-scroll :limit="1" :length="caseList.length" :step="1.1" mode="2">
<div
v-for="(item, i) in caseList"
:key="i"
class="detail"
@click="handleClick(i)"
>
<div class="title">
<p>{{ item.name }}</p>
<span />
<p>{{ item.type }}</p>
</div>
<div class="msg">
<p>{{ item.address }}</p>
<p>{{ item.date }}</p>
</div>
<m-step :steps="steps" :current="item.cur" />
</div>
</m-scroll>
</div>
<m-modal v-model="showDetail" title="详情">
<m-form
:template="[
'name:小区名称|type:事件类型',
'cur:当前状态>transState|date:时间',
'address:地址',
]"
label-width="0.7rem"
:data="curDetail"
:formatter="formatter"
/>
</m-modal>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import store from '@/store'
interface CaseProp {
name: string
type: string
address: string
date: string
cur: number
}
export default defineComponent({
name: 'TestComponent',
emits: ['select'],
setup(props, context) {
const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
const caseList = ref<CaseProp[]>([
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 5,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 4,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 3,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 2,
},
])
const curDetail = ref<CaseProp | null>(null)
const showDetail = ref(false)
const handleClick = (i: number) => {
context.emit('select', i)
curDetail.value = caseList.value[i]
store.commit('SET_LOADING', true)
store.commit('SET_LOADING', false)
showDetail.value = true
// setTimeout(() => {
// }, 2000)
}
return {
steps,
caseList,
showDetail,
handleClick,
curDetail,
formatter: {
transState: (val: number) => steps.value[val],
},
}
},
})
</script>
<style scoped lang="stylus">
@import '../components/MyComponent/main.styl'
.test-component
$full()
overflow hidden
.detail
display flex
flex-direction column
justify-content space-between
padding .1rem
height 1rem
background rgba(0,0,0,0.2)
margin-bottom .1rem
box-sizing border-box
cursor pointer
&:hover
border .01rem solid $blue
.title
display flex
align-items center
p
font-size .12rem
&:last-child
color $edge
font-size .1rem
span
display block
height .01rem
background $blue
flex 1
margin 0 .1rem
.msg
$center()
justify-content space-between
color $blue
font-size .08rem
</style>
src/view/test-component2.vue deleted 100644 → 0
View file @ b4c389b8
<template>
<div class="test-component2">
<div class="summary">
<div v-for="item in summary" :key="item.name">
<m-wave :value="item.percent" size=".4rem">
<m-count :value="item.percent" /> %
</m-wave>
<div>
<m-count class="count" :value="item.value" auto-play />
<p>{{ item.name }}</p>
</div>
</div>
</div>
<div class="rank">
<m-progress
v-for="rank in rankList"
:key="rank.name"
:value="rank.value"
:msg="rank"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'TestComponent2',
setup() {
const summary = ref([
{
name: '街面管理',
value: 75,
percent: 52,
},
{
name: '综合管理',
value: 56,
percent: 36,
},
{
name: '小区管理',
value: 85,
percent: 78,
},
])
const rankList = ref([
{ name: '分类1', value: 50 },
{ name: '分类2', value: 31 },
{ name: '分类3', value: 15 },
{ name: '分类4', value: 65 },
{ name: '分类5', value: 95 },
])
return {
summary,
rankList,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.test-component2
height 100%
display flex
flex-direction column
.summary
display flex
justify-content space-between
align-items center
margin-top .1rem
>div
display flex
align-items center
>div
margin-left .05rem
.count
font-size .14rem
font-weight bold
p
color #ccc
.rank
flex 1
display flex
flex-direction column
justify-content space-around
</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