svg path changes

shuishen

2023-01-03 e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f

 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>