<template>
|
<view class="pageBox">
|
<!-- 顶部导航 -->
|
<headNav :idIndex="idIndex" text="中医地域医谱" style="z-index: 999" />
|
<view
|
class="flex flex-center"
|
style="width: 100%; margin: 20px 0 34px; justify-content: flex-start"
|
>
|
<advancedSearch
|
class="Search"
|
placehold="输入姓名/别名/朝代/传主职业搜索"
|
@onSearch="onSearch"
|
:isAvancedTrue="false"
|
:keyword="keyword"
|
/>
|
<ul class="flex">
|
<li v-for="(item, index) in dynasty" :key="item.id">
|
<view
|
@click="SchoolClick(item.id)"
|
class="flex flex-center font-family school"
|
:style="{
|
marginRight: index === dynasty.length - 1 ? '0' : '0.03rem',
|
}"
|
style="
|
font-weight: 500;
|
border-radius: 0.3rem;
|
padding: 0.06rem 0.15rem;
|
color: #2c2c2c;
|
font-size: 0.12rem;
|
margin-top: 0.03rem;
|
margin-right: 0.1rem;
|
background-color: #fff;
|
"
|
>
|
<view
|
:style="{ background: item.color }"
|
style="
|
margin-right: 0.07rem;
|
width: 0.12rem;
|
height: 0.12rem;
|
border-radius: 50%;
|
"
|
></view>
|
<view style="color: #2c2c2c; font-size: 0.12rem">{{
|
item.name
|
}}</view>
|
</view>
|
</li>
|
</ul>
|
</view>
|
<!-- 搜索后的弹框 -->
|
<el-card
|
class="box-card"
|
v-if="isSearch"
|
style="
|
height: 3.2rem;
|
width: 3rem;
|
position: fixed;
|
z-index: 99;
|
left: 1rem;
|
top: 2.2rem;
|
"
|
>
|
<div slot="header" class="clearfix">
|
<span>人物 ({{ SearchArr.length }})</span>
|
<el-button
|
style="
|
float: right;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
@click="isSearch = false"
|
type="text"
|
>关闭</el-button
|
>
|
</div>
|
<view style="overflow: auto; height: 2.5rem">
|
<div
|
v-if="!loading && SearchArr.length == 0"
|
style="
|
position: absolute;
|
top: 30%;
|
left: 0;
|
right: 0;
|
text-align: center;
|
font-size: 0.2rem;
|
color: #666;
|
"
|
>
|
暂无搜索数据
|
</div>
|
<ul
|
class="information"
|
v-for="(item, index) in SearchArr"
|
:key="index"
|
@click="showCard(item)"
|
>
|
<li style="font-size: 0.18rem; font-weight: 700">
|
{{ item.name ? item.name : "-" }}
|
</li>
|
<li>
|
生卒年:
|
{{ item.birthAndDeath ? item.birthAndDeath : "-" }}
|
</li>
|
<li>来源: {{ item.source ? item.source : "-" }}</li>
|
<li
|
v-if="SearchArr.length - 1 !== index"
|
style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
|
></li>
|
</ul>
|
</view>
|
</el-card>
|
<!-- echarts里面的数据点击后弹框 -->
|
|
<div class="mapBox" id="mapBox" v-loading="mapLoading">
|
<div id="map"></div>
|
<el-card
|
class="box-card echartsTrue"
|
v-show="isEchTrue"
|
style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
|
:style="{ top: isTop, left: isLeft }"
|
>
|
<div slot="header" class="clearfix">
|
<span v-if="currentMark">{{
|
currentMark.name ? currentMark.name : "-"
|
}}</span>
|
<el-button
|
style="
|
float: right;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
@click="isEchTrue = false"
|
type="text"
|
>关闭</el-button
|
>
|
</div>
|
<ul class="information" v-if="currentMark">
|
<li>
|
姓名:
|
{{ currentMark.name ? currentMark.name : "-" }}
|
</li>
|
<li>别名: {{ currentMark.nikeName ? currentMark.nikeName : "-" }}</li>
|
<li>
|
籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
|
</li>
|
<li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
|
<li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
|
</ul>
|
<el-button
|
class="flex"
|
@click="viewMoreClick"
|
style="
|
width: 100%;
|
padding: 3px 0;
|
font-size: 0.12rem;
|
color: #597aa5;
|
"
|
type="text"
|
>查看更多>></el-button
|
>
|
</el-card>
|
</div>
|
|
<!-- 朝代 -->
|
<view
|
class="flex flex-center"
|
style="
|
width: 100%;
|
position: fixed;
|
bottom: 0.33rem;
|
left: 0;
|
right: 0;
|
z-index: 99;
|
overflow: auto;
|
"
|
>
|
<ul class="flex">
|
<li
|
@click="dynastyBottomClick(item.id)"
|
v-for="(item, index) in dynasty1"
|
:key="item.id"
|
>
|
<view
|
class="flex flex-center"
|
style="height: 0.35rem; background-color: #fff; color: #244a7b"
|
>
|
{{ item.start }}
|
</view>
|
<view
|
class="flex flex-center font-family"
|
style="
|
min-width: 0.6rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
text-align: center;
|
color: #fff;
|
font-size: 0.14rem;
|
margin-top: 0.03rem;
|
margin-right: 0.03rem;
|
background-color: #597aa5;
|
"
|
:style="{
|
marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
|
background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
|
}"
|
>
|
{{ item.dynastyChs }}
|
</view>
|
</li>
|
</ul>
|
</view>
|
</view>
|
</template>
|
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
|
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
|
<script>
|
import { loadBMap } from "@/static/map.js";
|
import L from "leaflet";
|
import "leaflet.chinatmsproviders";
|
import * as echarts from "echarts";
|
import "echarts/extension/bmap/bmap";
|
import { getRetrieval, getDynasty, getPreCount } from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
loading: true,
|
mapLoading: true,
|
// echarts元素点击时出来的弹窗和坐标
|
keyword: "",
|
isEchTrue: false,
|
isLeft: 0,
|
isTop: 0,
|
// 用户信息
|
information: [
|
{
|
label: "姓名",
|
content: "李时珍",
|
},
|
{
|
label: "别名",
|
content: "东丽先生",
|
},
|
{
|
label: "籍贯",
|
content: "湖北",
|
},
|
{
|
label: "医学分科",
|
content: "中药,针灸",
|
},
|
{
|
label: "小传",
|
content:
|
"李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
|
},
|
],
|
// 下面的朝代1
|
dynasty1Color: "",
|
dynasty1: [
|
{
|
name: "夏朝",
|
coord: "2070BC",
|
id: 1,
|
},
|
{
|
name: "商朝",
|
id: 2,
|
coord: "1600BC",
|
},
|
{
|
name: "西周",
|
id: 3,
|
coord: "1600BC",
|
},
|
{
|
name: "春秋战国",
|
id: 4,
|
coord: "770BC",
|
},
|
{
|
name: "秦朝",
|
id: 5,
|
coord: "221BC",
|
},
|
{
|
name: "汉朝",
|
id: 6,
|
coord: "202BC",
|
},
|
{
|
name: "三国两晋南北朝",
|
id: 7,
|
coord: "184",
|
},
|
{
|
name: "隋朝",
|
id: 8,
|
coord: "581",
|
},
|
{
|
name: "唐朝",
|
id: 9,
|
coord: "618",
|
},
|
{
|
name: "五代十国",
|
id: 10,
|
coord: "907",
|
},
|
{
|
name: "辽夏金",
|
id: 11,
|
coord: "907",
|
},
|
{
|
name: "宋朝",
|
id: 12,
|
coord: "960",
|
},
|
{
|
name: "元朝",
|
id: 13,
|
coord: "1271",
|
},
|
{
|
name: "明朝",
|
id: 14,
|
coord: "1368",
|
},
|
{
|
name: "清朝",
|
id: 15,
|
coord: "1636",
|
},
|
],
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
// 朝代
|
dynasty: [
|
{
|
name: "夏",
|
color: "#90BBD8",
|
id: 1,
|
},
|
{
|
name: "商",
|
color: "#EDD28B",
|
id: 2,
|
},
|
{
|
name: "西周",
|
color: "#CF746D",
|
id: 3,
|
},
|
{
|
name: "秦",
|
color: "#9CC27A",
|
id: 4,
|
},
|
{
|
name: "汉",
|
color: "#5B6CB9",
|
id: 5,
|
},
|
{
|
name: "隋",
|
color: "#8860A8",
|
id: 6,
|
},
|
{
|
name: "唐",
|
color: "#DE8E66",
|
id: 7,
|
},
|
{
|
name: "明",
|
color: "#DE8E66",
|
id: 8,
|
},
|
],
|
// 搜索后是否显示弹框
|
isSearch: false,
|
currentMark: null,
|
SearchArr: [
|
{
|
id: 1,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
|
},
|
{
|
id: 2,
|
name: "李时珍",
|
birthAndDeath: "1518-1593",
|
source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
|
},
|
],
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
},
|
mounted() {
|
this.getDynastyList();
|
|
this.getDataList();
|
},
|
methods: {
|
getDynastyList() {
|
getDynasty().then((res) => {
|
this.dynasty1 = res.list;
|
});
|
},
|
showCard(info) {
|
const item = this.markerList.find((f) => f.id == info.id);
|
var latlng = L.latLng(item.yCoord, item.xCoord);
|
this.map.setView(latlng, 10);
|
setTimeout(() => {
|
this.isEchTrue = true;
|
this.currentMark = {
|
name: item?.WEAK_NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.MEDICAL_EXPERTISE[0]?.content1,
|
id: item.id,
|
};
|
this.$nextTick(() => {
|
this.isTop =
|
document.getElementById("mapBox").offsetHeight / 2 - 275 + "px";
|
this.isLeft =
|
document.getElementById("mapBox").offsetWidth / 2 - 171 + "px";
|
});
|
}, 300);
|
},
|
getDataList() {
|
this.SearchArr = [];
|
this.loading = true;
|
this.mapLoading = true;
|
// 这里改成了分页的接口，需要调用多次取出所有数据
|
let times = 0;
|
getPreCount({
|
keyword: this.keyword,
|
dynasty: this.dynasty1Color,
|
}).then(async (res) => {
|
const totalCount = res.object;
|
if (totalCount % 200 == 0) {
|
times = totalCount / 200 - 1;
|
} else {
|
times = Math.floor(totalCount / 200);
|
}
|
console.log(times, "times");
|
if (times == 0 || times < 0) times = 1;
|
let markerList = [];
|
for (let i = 1; i <= times; i++) {
|
const curData = await this.getDataPageInfo(i);
|
if (curData) {
|
markerList = [...markerList, ...curData];
|
}
|
if (i == times) {
|
this.initMap(markerList);
|
this.SearchArr = markerList.map((item) => ({
|
birthAndDeath: item?.BIRTH_YEAR[0]?.content1
|
? item?.BIRTH_YEAR[0]?.content1 +
|
"-" +
|
item?.DEATH_YEAR[0]?.content1
|
: "-",
|
name: item?.NAME[0]?.content1,
|
source: "-",
|
id: item.id,
|
}));
|
this.markerList = markerList;
|
this.loading = false;
|
this.mapLoading = false;
|
}
|
}
|
});
|
|
// 问题：
|
// 搜索结果不对
|
// 点击地图标点出现弹框，拖动地图时应关闭弹框
|
|
// getRetrieval({
|
// keyword: this.keyword,
|
// dynasty: this.dynasty1Color,
|
// page: 1,
|
// pageSize: 200,
|
// }).then((res) => {
|
// this.loading = false;
|
// if (res.object) {
|
// let markerList = [];
|
// const listData = res.object.personList;
|
// for (let i = 0; i < listData.length; i++) {
|
// const item = listData[i];
|
// if (item.NATIVE_PLACE?.length > 0) {
|
// item.NATIVE_PLACE.forEach((citem) => {
|
// if (citem.xCoord && citem.yCoord) {
|
// const currentDynasty = this.dynasty1.find(
|
// (f) => f.id == item.PERIOD[0].content1
|
// );
|
// if (currentDynasty) {
|
// item.dynastyInfo = currentDynasty;
|
// }
|
// markerList.push({ ...citem, ...item });
|
// }
|
// });
|
// }
|
// }
|
// this.initMap(markerList);
|
// this.SearchArr = markerList.map((item) => ({
|
// birthAndDeath: item?.BIRTH_YEAR[0]?.content1
|
// ? item?.BIRTH_YEAR[0]?.content1 +
|
// "-" +
|
// item?.DEATH_YEAR[0]?.content1
|
// : "-",
|
// name: item?.NAME[0]?.content1,
|
// source: "-",
|
// id: item.id,
|
// }));
|
// this.markerList = markerList;
|
// } else {
|
// this.initMap([]);
|
// }
|
// });
|
},
|
|
async getDataPageInfo(count) {
|
const res = await getRetrieval({
|
keyword: this.keyword,
|
dynasty: this.dynasty1Color,
|
page: count,
|
pageSize: 200,
|
});
|
if (res.object) {
|
let markerList = [];
|
const listData = res.object.personList;
|
for (let i = 0; i < listData.length; i++) {
|
const item = listData[i];
|
if (item.NATIVE_PLACE?.length > 0) {
|
item.NATIVE_PLACE.forEach((citem) => {
|
if (citem.xCoord && citem.yCoord) {
|
const currentDynasty = this.dynasty1.find(
|
(f) => f.id == item.PERIOD[0].content1
|
);
|
if (currentDynasty) {
|
item.dynastyInfo = currentDynasty;
|
}
|
markerList.push({ ...citem, ...item });
|
}
|
});
|
}
|
}
|
|
return markerList;
|
} else {
|
return [];
|
}
|
},
|
onMapMoveEnd() {
|
console.log("地图拖动了");
|
this.isEchTrue = false;
|
},
|
//初始化地图
|
initMap(markerList) {
|
console.log(markerList, "markerList");
|
this.isEchTrue = false;
|
if (this.map) {
|
this.map.remove();
|
}
|
var map = L.map("map", {
|
preferCanvas: true,
|
attributionControl: false,
|
}).setView([34.3227, 108.5525], 5);
|
map.on("moveend", this.onMapMoveEnd);
|
map.on("zoomend", function () {
|
var zoomLevel = map.getZoom(); // 获取当前地图的缩放级别
|
console.log("当前地图缩放级别为:", zoomLevel);
|
this.isEchTrue = false;
|
});
|
L.tileLayer
|
.chinaProvider("TianDiTu.Normal.Map", {
|
key: "76bc34ead7e30e663a4eded8aeaf5860",
|
maxZoom: 18,
|
minZoom: 3,
|
})
|
.addTo(map);
|
let DefaultIcon1 = L.icon({
|
iconUrl: this.icoName,
|
iconSize: [24, 41], // 图标的大小 【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
|
iconAnchor: [24, 41], // 图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
|
popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置 这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
|
});
|
|
let icon = L.divIcon({
|
html: "<div class='map-circle-name '></div>",
|
iconSize: [80, 80],
|
className: "map-circle",
|
});
|
this.map = map;
|
if (markerList.length) {
|
for (let i = 0; i < markerList.length; i++) {
|
const item = markerList[i];
|
let currentClassName = "map-circle-name";
|
if (item.dynastyInfo) {
|
switch (item.dynastyInfo.dynastyChs) {
|
case "夏":
|
currentClassName = "map-circle-xia";
|
break;
|
case "商":
|
currentClassName = "map-circle-shang";
|
break;
|
case "西周":
|
currentClassName = "map-circle-zhou";
|
break;
|
case "秦":
|
currentClassName = "map-circle-qin";
|
break;
|
case "汉":
|
currentClassName = "map-circle-han";
|
break;
|
case "隋":
|
currentClassName = "map-circle-sui";
|
break;
|
case "唐":
|
currentClassName = "map-circle-tang";
|
break;
|
case "明":
|
currentClassName = "map-circle-ming";
|
break;
|
}
|
}
|
|
let icon = L.divIcon({
|
html: `<div class='${currentClassName} ripple'></div>`,
|
iconSize: [80, 80],
|
className: "map-circle",
|
});
|
const temp_mark = L.marker([item.yCoord, item.xCoord], {
|
icon: icon,
|
}).addTo(map);
|
temp_mark.on("click", (e) => {
|
setTimeout(() => {
|
this.isEchTrue = true;
|
this.currentMark = {
|
name: item?.WEAK_NAME[0]?.content1,
|
nikeName: item?.ALIAS[0]?.content2,
|
nativePlace: item?.content1,
|
barnch: item?.MEDICAL_BRANCH[0]?.content1,
|
medical: item?.MEDICAL_EXPERTISE[0]?.content1,
|
id: item.id,
|
};
|
this.isTop = e.containerPoint.y - 275 + "px";
|
this.isLeft = e.containerPoint.x - 171 + "px";
|
}, 300);
|
});
|
}
|
}
|
},
|
|
// 点击下面的朝代按钮
|
dynastyBottomClick(id) {
|
this.dynasty1Color = id;
|
this.getDataList();
|
},
|
onSearch(val) {
|
this.isSearch = true;
|
this.keyword = val.text;
|
this.map.invalidateSize();
|
|
this.getDataList();
|
},
|
// 点击上面的朝代按钮
|
SchoolClick(id) {},
|
// 查看更多>>
|
viewMoreClick() {
|
uni.navigateTo({
|
url: "/pages/character/detail?id=" + this.currentMark.id,
|
});
|
},
|
},
|
};
|
</script>
|
|
<style>
|
::v-deep .map-circle-name {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(144, 187, 216);
|
}
|
::v-deep .map-circle-xia {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(144, 187, 216);
|
}
|
::v-deep .map-circle-shang {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(237, 210, 139);
|
}
|
::v-deep .map-circle-zhou {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(207, 116, 109);
|
}
|
::v-deep .map-circle-qin {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(156, 194, 122);
|
}
|
::v-deep .map-circle-han {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(91, 108, 185);
|
}
|
::v-deep .map-circle-sui {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(136, 96, 168);
|
}
|
::v-deep .map-circle-tang {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(136, 96, 168);
|
}
|
::v-deep .map-circle-ming {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(222, 142, 102);
|
}
|
|
.pageBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.echartsTrue::before {
|
content: "";
|
width: 0;
|
height: 0;
|
position: absolute;
|
bottom: -0.18rem;
|
left: 1.2rem;
|
/* background-color: red; */
|
border-left: 0.2rem solid transparent;
|
/* 左边透明 */
|
border-right: 0.2rem solid transparent;
|
/* 右边透明 */
|
border-top: 0.2rem solid #fff;
|
/* 顶部红色 */
|
z-index: 999;
|
}
|
|
::v-deep .el-card__header {
|
border: 0;
|
background-color: #dde8f6;
|
height: 0.36rem;
|
padding: 0.08rem 0.13rem;
|
font-size: 0.14rem;
|
font-weight: 600;
|
}
|
|
.information li {
|
font-size: 0.12rem;
|
color: #2c2c2c;
|
line-height: 2;
|
}
|
|
/* 地图上的左下角 */
|
::v-deep .anchorBL {
|
display: none;
|
}
|
|
@media screen and (min-width: 2560px) and (max-width: 3840px) {
|
.Search {
|
/* width: 30%; */
|
justify-content: flex-end;
|
margin-right: 0.26rem;
|
width: 4rem;
|
}
|
|
.Search ::v-deep .ffff {
|
width: 3rem;
|
height: 0.36rem;
|
padding: 0.01rem;
|
border-radius: 0.3rem !important;
|
}
|
|
.Search ::v-deep .widget_button {
|
width: 1rem;
|
/* height: .3rem; */
|
font-size: 0.14rem;
|
padding: 0;
|
border-radius: 0.3rem !important;
|
}
|
|
.Search ::v-deep .widget_style {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.Search ::v-deep .uni-input-placeholder {
|
font-size: 0.13rem;
|
/* height: 100%; */
|
line-height: 1;
|
}
|
|
.Search ::v-deep .uni-input-input {
|
margin-left: 0.19rem;
|
}
|
}
|
|
#main {
|
flex: 1;
|
}
|
|
.Search {
|
/* width: 30%; */
|
justify-content: flex-end;
|
margin-right: 0.26rem;
|
width: 4rem;
|
}
|
|
.Search ::v-deep .ffff {
|
width: 3rem;
|
height: 0.36rem;
|
padding: 0.01rem;
|
}
|
|
.Search ::v-deep .widget_button {
|
width: 1rem;
|
/* height: .3rem; */
|
font-size: 0.14rem;
|
padding: 0;
|
background-color: #597aa5;
|
}
|
|
.Search ::v-deep .widget_style {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.Search ::v-deep .uni-input-placeholder {
|
font-size: 0.13rem;
|
/* height: 100%; */
|
line-height: 1;
|
margin-left: 0.19rem;
|
}
|
|
.mapBox {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
position: relative;
|
}
|
#map {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
font-size: 14px !important;
|
z-index: 10 !important;
|
}
|
|
::v-deep .ripple {
|
border-radius: 50%;
|
position: relative;
|
overflow: hidden;
|
}
|
|
::v-deep .ripple::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 150%; /* Ensure it covers the entire parent */
|
height: 150%;
|
background: rgba(255, 255, 255, 0.5);
|
border-radius: 50%;
|
transform: translate(-50%, -50%) scale(1);
|
animation: ripple-animation 1s infinite linear;
|
}
|
|
@keyframes ripple-animation {
|
to {
|
transform: translate(-50%, -50%) scale(0);
|
opacity: 0;
|
}
|
}
|
</style>
|
