From e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 03 Jan 2023 15:00:43 +0800
Subject: [PATCH] svg path changes
---
src/views/home/components/bottomContainer.vue | 143 ++++++++++++++++++++++++++++++++---------------
1 files changed, 98 insertions(+), 45 deletions(-)
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 9bb8fb6..f5b5765 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -1,55 +1,89 @@
<template>
<div class="container">
- <div class="header">
- <div class="bottom-title">警情动态</div>
- <div class="timeTab" v-show="historytype">
- <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
- <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
- </div>
- <div class="timeSeclect" v-show="historytype">
- <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
- start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
- </div>
- <div class="history-tab">
- <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
- <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
+ <div class="box">
+ <div class="header">
+ <div class="bottom-title">警情动态</div>
+ <div class="timeTab" v-show="historytype">
+ <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
+ <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
+ </div>
+ <div class="timeSeclect" v-show="historytype">
+ <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
+ start-placeholder="开始日期" end-placeholder="结束日期"
+ :picker-options="pickerOptions"></el-date-picker>
+ </div>
+ <div class="history-tab">
+ <span class="beforetime" :class="{ choosed: historytype == 0 }"
+ @click="historyTabClick(0)">实时</span>
+ <span class="beforetime" :class="{ choosed: historytype == 1 }"
+ @click="historyTabClick(1)">历史</span>
+ </div>
+
</div>
- </div>
-
- <div class="body" ref="tableBox" @click="handleSelectClick($event)">
- <ul class="title-header">
- <li>
- <span class="num">序号</span>
- <span class="type">警情类别</span>
- <span class="dealTime">接警时间</span>
- <span class="state">警情状态</span>
- <span class="dealPolice">经办民警</span>
- <span class="callPeople">报警人</span>
- <span class="comingPhone">报警电话</span>
- <span class="callPhone">报警人联系人</span>
- <span class="callContent">报警内容</span>
- </li>
- </ul>
- <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
- class="warp" :class-option="classOption">
- <ul class="item">
- <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
- :key="index" :data-obj="JSON.stringify(item)" class="row">
- <!-- <span class="num" v-text="item.num"></span> -->
- <span class="num" v-text="index + 1"></span>
- <span class="type" v-text="item.type"></span>
- <span class="dealTime" v-text="item.dealTime"></span>
- <span class="state" v-text="item.state"></span>
- <span class="dealPolice" v-text="item.dealPolice"></span>
- <span class="callPeople" v-text="item.callPeople"></span>
- <span class="comingPhone" v-text="item.comingPhone"></span>
- <span class="callPhone" v-text="item.callPhone"></span>
- <span class="callContent" v-text="item.callContent"></span>
+ <div class="body" ref="tableBox" @click="handleSelectClick($event)">
+ <ul class="title-header">
+ <li>
+ <span class="num">序号</span>
+ <span class="type">警情类别</span>
+ <span class="dealTime">接警时间</span>
+ <span class="state">警情状态</span>
+ <span class="dealPolice">经办民警</span>
+ <span class="callPeople">报警人</span>
+ <span class="comingPhone">报警电话</span>
+ <span class="callPhone">报警人联系人</span>
+ <span class="callContent">报警内容</span>
</li>
</ul>
- </vue-seamless-scroll>
+ <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
+ class="warp" :class-option="classOption">
+ <ul class="item">
+ <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
+ :key="index" :data-obj="JSON.stringify(item)" class="row">
+ <!-- <span class="num" v-text="item.num"></span> -->
+ <span class="num" v-text="index + 1"></span>
+ <span class="type" v-text="item.type"></span>
+ <span class="dealTime" v-text="item.dealTime"></span>
+ <span class="state" v-text="item.state"></span>
+ <span class="dealPolice" v-text="item.dealPolice"></span>
+ <span class="callPeople" v-text="item.callPeople"></span>
+ <span class="comingPhone" v-text="item.comingPhone"></span>
+ <span class="callPhone" v-text="item.callPhone"></span>
+ <span class="callContent" v-text="item.callContent"></span>
+ </li>
+ </ul>
+ </vue-seamless-scroll>
+ </div>
</div>
+
+ <svg class="border-svg">
+ <defs>
+ <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
+ c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
+ c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
+ c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
+ c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent">
+ </path>
+ <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
+ <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
+ <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+ </radialGradient>
+ <mask id="border-box-mask">
+ <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
+ <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
+ c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
+ c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
+ c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
+ c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion>
+ </circle>
+ </mask>
+ </defs>
+
+ <use stroke-width="4" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
+ <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite">
+ </animate>
+ </use>
+ </svg>
</div>
</template>
@@ -242,6 +276,15 @@
background-size: 100% 100%;
background-repeat: no-repeat;
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 11;
+ }
+
.header {
position: relative;
width: 100%;
@@ -399,5 +442,15 @@
}
}
}
+
+
+ .border-svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ }
}
</style>
--
Gitblit v1.9.3