shortVideo.nvue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834
  1. <template>
  2. <view class="page">
  3. <!-- <nav-bar type="transparentFixed"></nav-bar> -->
  4. <swiper class="video_swiper" vertical circular :skip-hidden-item-layout="true" duration="300"
  5. @change="onSwiperChange">
  6. <swiper-item v-for="(item,index) of videoObj" :key="index" :data-index="index">
  7. <short-video :play="swiperIndex == index" :src="item.video_url" :index="index" :progress="progress"
  8. :progressValue="progressValue"></short-video>
  9. <!-- <view class="content_bottom_box">
  10. <view class="content_goods_info">
  11. </view>
  12. <text class="content_user_name">@{{item.video_title}}</text>
  13. <text class="content_description">{{item.video_desc}}~</text>
  14. </view> -->
  15. <view class="sheet-conent">
  16. <block v-if="item.close">
  17. <view v-if="item.jump_state==1">
  18. <view style=" flex-direction: row;align-items: center;" v-if="item.jump_type==1"
  19. :style="'width:'+jump_width+'px'+';'+'height:'+jump_height+'px'"
  20. @click="href(item.jump_web)"
  21. class="flex-y-center flex-row sheet-conent-ad sheet-conent-ad-home">
  22. <image class="sheet-conent-ad-icon"
  23. :style="'width:'+icon_width+'px'+';'+'height:'+icon_width+'px'"
  24. :src="URL+item.jump_img" mode=""></image>
  25. <image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
  26. mode=""></image>
  27. <view class="sheet-conent-ad-text" :style="'width:'+text_width+'px'">
  28. <view class="text-1" style="display: block;">
  29. {{item.jump_title}}
  30. </view>
  31. <view class="sheet-conent-ad-desc text-2" style="display: block;">
  32. {{item.jump_cont}}
  33. </view>
  34. </view>
  35. </view>
  36. <view v-else class="sheet-conent-ad sheet-conent-ad-home">
  37. <view v-html="item.wxOpenTags">
  38. </view>
  39. <image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
  40. mode=""></image>
  41. </view>
  42. </view>
  43. </block>
  44. <block v-if="item.video_state==1">
  45. <view class="sheet-conent-title text-1" style="display: block;">
  46. {{item.video_title?'@':''}}{{item.video_title}}
  47. </view>
  48. <view class="sheet-conent-desc text-2" style="display: block;">
  49. {{item.video_desc}}
  50. </view>
  51. </block>
  52. </view>
  53. <view class="right_suspended">
  54. <!-- <image class="sheet-avatar" :src="video_face" mode=""></image> -->
  55. <view class="suspended_features_item" v-if="item.video_zan">
  56. <text class="iconfont animate red iconxihuan"></text>
  57. <text class="suspended_features_text">{{item.video_zan}}</text>
  58. <!-- <text class="suspended_features_dot">{{item.video_zan}}</text> -->
  59. </view>
  60. <view class="suspended_features_item" v-if="item.video_tel" @click="phone(item.video_tel)">
  61. <text class="iconfont iconlianxi"></text>
  62. <text class="suspended_features_text">{{item.video_ping}}</text>
  63. </view>
  64. <view class="suspended_features_item" v-if="item.video_zan" @click="share(index,item.card_num)">
  65. <text class="iconfont iconzhuanfa"></text>
  66. <text class="suspended_features_text">分享</text>
  67. </view>
  68. </view>
  69. </swiper-item>
  70. </swiper>
  71. <view class="model" @click="close_share" v-if="isdown">
  72. <view class="model-home">
  73. <image class="model-img" src="/static/images/jt.png" />
  74. <view>1.请点击右上角
  75. <block>选择分享好友</block>
  76. </view>
  77. </view>
  78. <view class="model-close">
  79. 2.点击关闭遮盖层
  80. </view>
  81. </view>
  82. <view class="progress_drag" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchcancel="onTouchcancel"
  83. @touchend="onTouchend"></view>
  84. <view class="model_s flex-center" v-if="hj_state" @click="closehj">
  85. <view class="">
  86. <view class="wave ripple danger">
  87. <view class="circle"></view>
  88. <view class="circle"></view>
  89. <view class="circle"></view>
  90. <view class="circle"></view>
  91. <view class="circle"></view>
  92. <view class="circle"></view>
  93. <view class="model_s_pa flex-center">
  94. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  95. </view>
  96. </view>
  97. <view class="model_s_text flex-center" style="text-align: center;">
  98. 开始播放
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import shortVideo from "@/components/module/short_video.vue";
  106. // #ifdef H5
  107. import getWXSign from "@/static/js/config.js";
  108. // #endif
  109. export default {
  110. components: {
  111. shortVideo,
  112. },
  113. data() {
  114. return {
  115. swiperIndex: -1,
  116. progress: 10000,
  117. progressValue: 0,
  118. shareShow: false,
  119. videoObj: [],
  120. page: 1,
  121. URL: getApp().globalData.URL,
  122. close: true,
  123. wxOpenTags: "",
  124. jump_width: "",
  125. jump_height: "",
  126. isdown: false,
  127. icon_width: "",
  128. // icon_height:"",
  129. text_width: "",
  130. hj_state: true,
  131. card_num: '',
  132. };
  133. },
  134. onReachBottom() {
  135. console.log("到底了")
  136. this.http();
  137. },
  138. //第一次加载
  139. onLoad(e) {
  140. // 隐藏原生的tabbar
  141. // uni.hideTabBar();
  142. let systemInfo = uni.getSystemInfoSync();
  143. this.screenWidth = systemInfo.screenWidth;
  144. var windowWidth = uni.getSystemInfoSync().windowWidth, // 获取当前窗口的宽度
  145. windowHeight = uni.getSystemInfoSync().windowHeight; // 获取当前窗口的高度
  146. this.jump_width = windowWidth / 1.4;
  147. this.jump_height = (windowWidth / 1.4) / 3.1;
  148. this.icon_width = this.jump_height - 20;
  149. this.text_width = this.jump_width - this.icon_width - 16
  150. // #ifdef H5
  151. getWXSign().then(res => {
  152. console.log(res)
  153. })
  154. // #endif
  155. function getUrlParam(paraName) {
  156. let url = window.location.href;
  157. var arrObj = url.split("?");
  158. if (arrObj.length > 1) {
  159. var arr;
  160. for (var i = 0; i < arrObj.length; i++) {
  161. arr = arrObj[i].split("=");
  162. console.log(arr)
  163. if (arr != null && arr[0] == paraName) {
  164. return arr[1];
  165. }
  166. }
  167. return "";
  168. } else {
  169. return "";
  170. }
  171. }
  172. // #ifdef H5
  173. this.card_num = getUrlParam('card_num') || "";
  174. // #endif
  175. this.http();
  176. },
  177. //页面显示
  178. onShow() {
  179. // 隐藏原生的tabbar
  180. // uni.hideTabBar();
  181. // #ifdef APP-PLUS
  182. uni.showModal({
  183. title: "提示",
  184. content: "APP体验效果不好,暂没做兼容",
  185. showCancel: false
  186. });
  187. // #endif
  188. },
  189. //方法
  190. methods: {
  191. closehj(e) {
  192. this.hj_state = false;
  193. this.swiperIndex = 0;
  194. },
  195. href(jump_web) {
  196. location.href = jump_web;
  197. },
  198. share(index, code) {
  199. this.isdown = true;
  200. // #ifdef H5
  201. this.videoObj[index]
  202. let desc = {
  203. wx_title: this.videoObj[index].wx_title,
  204. wx_desc: this.videoObj[index].wx_desc,
  205. wx_img_url: this.videoObj[index].wximg_url,
  206. }
  207. console.log(desc, code, "desc")
  208. this.share_desc(desc, code);
  209. // #endif
  210. },
  211. close_share() {
  212. this.isdown = false;
  213. },
  214. del(index) {
  215. this.videoObj[index].close = false;
  216. // this.close = false;
  217. },
  218. phone(video_tel) {
  219. uni.makePhoneCall({
  220. phoneNumber: video_tel //仅为示例
  221. });
  222. },
  223. http() {
  224. this.request({
  225. url: "Videofuneng/videolist",
  226. data: {
  227. token: uni.getStorageSync("token"),
  228. page: this.page,
  229. limit: 20,
  230. card_num: this.card_num,
  231. },
  232. }).then(res => {
  233. console.log(res, "res")
  234. if (res.code === '200') {
  235. for (let i of res.data) {
  236. i.close = true;
  237. if (i.jump_type == 2) {
  238. let jump_title = i.jump_title,
  239. jump_img = this.URL + i.jump_img,
  240. jump_cont = i.jump_cont,
  241. xcx_original_id = i.xcx_original_id,
  242. xcx_link = i.xcx_link;
  243. console.log("xcx_original_id", xcx_original_id)
  244. var jump_width = this.jump_width;
  245. var jump_height = this.jump_height;
  246. var icon_width = this.icon_width;
  247. var text_width = this.text_width;
  248. // setTimeout(() => {
  249. i.wxOpenTags =
  250. `<wx-open-launch-weapp id="launch-wxapp" username="${xcx_original_id}" path="${xcx_link}" >
  251. <template>
  252. <style>
  253. .flex-y-center {
  254. display: -webkit-box;
  255. display: -webkit-flex;
  256. display: flex;
  257. -webkit-box-align: center;
  258. -webkit-align-items: center;
  259. -ms-flex-align: center;
  260. -ms-grid-row-align: center;
  261. align-items: center;
  262. }
  263. .sheet-conent-add {
  264. width: ${jump_width-10}px;
  265. height:${jump_height}px;
  266. }
  267. .sheet-conent-ad-home {
  268. position: relative;
  269. }
  270. .sheet-conent-ad-icon {
  271. width: ${icon_width}px;
  272. height: ${icon_width}px;
  273. min-width: 60px;
  274. margin: 0 10px;
  275. }
  276. .sheet-conent-ad-text {
  277. width: ${text_width-10}px;
  278. }
  279. .sheet-conent-ad-desc {
  280. font-size: 12px;
  281. font-family: PingFang SC, PingFang SC-Regular;
  282. font-weight: 400;
  283. color: #666666;
  284. margin-top:5px;
  285. min-height: 31px;
  286. }
  287. .text-1{
  288. overflow: hidden;
  289. text-overflow:ellipsis;
  290. white-space: nowrap;
  291. }
  292. </style>
  293. <div class="flex-y-center sheet-conent-add">
  294. <img class="sheet-conent-ad-icon" src="${jump_img}" mode=""></img>
  295. <div class="sheet-conent-ad-text">
  296. <div class="text-1">
  297. ${jump_title}
  298. </div>
  299. <div class="sheet-conent-ad-desc text-2">
  300. ${jump_cont}
  301. </div>
  302. </div>
  303. </div>
  304. </template>
  305. </wx-open-launch-weapp>`;
  306. // }, 500);
  307. }
  308. }
  309. this.page = this.page + 1;
  310. this.videoObj = this.videoObj.concat(res.data);
  311. let desc = {
  312. wx_title: "欢迎来到视频交流区",
  313. wx_desc: "记录美好生活的视频平台",
  314. wx_img_url: getApp().globalData.URL + "/forward/icon_2.png",
  315. }
  316. // #ifdef H5
  317. this.share_desc(desc, "");
  318. // #endif
  319. }
  320. }).catch((res) => {
  321. uni.showToast({
  322. title: res.message,
  323. icon: 'none'
  324. })
  325. });
  326. },
  327. share_desc(desc, code) {
  328. let card_num = code ? code : "";
  329. let siteroot = this.URL;
  330. getWXSign().then(r => {
  331. var imgUrl = desc.wx_img_url;
  332. console.log(imgUrl, "imgUrl")
  333. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  334. this.$wx.updateAppMessageShareData({
  335. title: desc.wx_title, // 分享标题
  336. desc: desc.wx_desc, // 分享描述
  337. link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
  338. imgUrl: imgUrl, // 分享图标
  339. success: (res) => {
  340. // 设置成功
  341. console.log("设置成功", res)
  342. }
  343. })
  344. this.$wx.updateTimelineShareData({
  345. title: desc.wx_title, // 分享标题
  346. link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
  347. imgUrl: imgUrl, // 分享图标
  348. success: (res) => {
  349. // 设置成功
  350. console.log("设置成功", res)
  351. }
  352. })
  353. } else {
  354. this.$wx.onMenuShareTimeline({
  355. title: desc.wx_title, // 分享标题
  356. desc: desc.wx_desc, // 分享描述
  357. link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
  358. imgUrl: imgUrl, // 分享图标
  359. success: (res) => {
  360. // 设置成功
  361. console.log("设置成功", res)
  362. }
  363. })
  364. this.$wx.onMenuShareAppMessage({
  365. title: desc.wx_title, // 分享标题
  366. desc: desc.wx_desc, // 分享描述
  367. link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
  368. imgUrl: imgUrl, // 分享图标
  369. success: (res) => {
  370. // 设置成功
  371. console.log("设置成功", res)
  372. }
  373. })
  374. }
  375. })
  376. },
  377. onPageJump(url) {
  378. uni.navigateTo({
  379. url: url
  380. });
  381. },
  382. onSwiperChange(e) {
  383. this.swiperIndex = e.detail.current;
  384. console.log(this.swiperIndex)
  385. if (this.swiperIndex == this.videoObj.length - 1) {
  386. this.http();
  387. }
  388. },
  389. onTouchstart(e) {
  390. this.progress = 0;
  391. },
  392. // 手指触摸后移动
  393. onTouchmove(e) {
  394. //手指当前坐标
  395. // #ifdef APP-NVUE
  396. const clientX = e.changedTouches[0].screenX;
  397. // #endif
  398. // #ifndef APP-NVUE
  399. const clientX = e.changedTouches[0].clientX;
  400. // #endif
  401. this.progress = parseInt((clientX / this.screenWidth) * 100);
  402. },
  403. // 手指触摸动作被打断,如来电提醒,弹窗
  404. onTouchcancel(e) {
  405. // #ifdef APP-NVUE
  406. this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
  407. // #endif
  408. // #ifndef APP-NVUE
  409. this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
  410. // #endif
  411. },
  412. // 手指触摸动作结束
  413. onTouchend(e) {
  414. // #ifdef APP-NVUE
  415. this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
  416. // #endif
  417. // #ifndef APP-NVUE
  418. this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
  419. // #endif
  420. }
  421. },
  422. //页面隐藏
  423. onHide() {},
  424. //页面卸载
  425. onUnload() {},
  426. //页面下来刷新
  427. onPullDownRefresh() {},
  428. //页面上拉触底
  429. onReachBottom() {},
  430. //用户点击分享
  431. onShareAppMessage(e) {
  432. return this.wxShare();
  433. }
  434. };
  435. </script>
  436. <style lang="scss">
  437. .page {
  438. background-color: #1a1b20;
  439. width: 100%;
  440. position: relative;
  441. }
  442. .iconfont {
  443. font-size: 50rpx;
  444. }
  445. .sheet-conent {
  446. position: absolute;
  447. z-index: 999;
  448. left: 50rpx;
  449. bottom: 100rpx;
  450. width: 600rpx;
  451. }
  452. .sheet-conent-ad {
  453. width: 530rpx;
  454. /* 270px */
  455. height: 168rpx;
  456. /* 168rpx */
  457. background: #ffffff;
  458. border-radius: 8rpx;
  459. box-shadow: 0px 4rpx 12rpx 0px rgba(208, 208, 208, 0.16);
  460. margin-bottom: 24rpx;
  461. padding-right: 20rpx;
  462. }
  463. .sheet-conent-ad-home {
  464. position: relative;
  465. }
  466. .sheet-conent-ad-text {
  467. width: 350rpx;
  468. }
  469. .sheet-conent-ad .sheet-conent-ad-icon {
  470. width: 120rpx;
  471. height: 140rpx;
  472. min-width: 120rpx;
  473. margin: 0 8px;
  474. }
  475. .sheet-conent-ad-desc {
  476. font-size: 24rpx;
  477. font-family: PingFang SC, PingFang SC-Regular;
  478. font-weight: 400;
  479. color: #666666;
  480. margin-top: 10rpx;
  481. min-height: 62rpx;
  482. }
  483. .sheet-conent-title {
  484. font-size: 36rpx;
  485. font-family: PingFang SC, PingFang SC-Medium;
  486. font-weight: 500;
  487. color: #ffffff;
  488. margin-bottom: 24rpx;
  489. }
  490. .sheet-conent-desc {
  491. font-size: 30rpx;
  492. font-family: PingFang SC, PingFang SC-Medium;
  493. font-weight: 500;
  494. color: #ffffff;
  495. }
  496. .del {
  497. position: absolute;
  498. right: 20rpx;
  499. top: 8rpx;
  500. width: 30rpx;
  501. height: 30rpx;
  502. /* background: #cbcbcb; */
  503. border-radius: 1rpx;
  504. }
  505. .progress_drag {
  506. position: absolute;
  507. bottom: 0rpx;
  508. left: 0;
  509. width: 100%;
  510. padding: 15rpx 0;
  511. z-index: 5;
  512. }
  513. .video_swiper {
  514. width: 100%;
  515. height: calc(100vh - var(--window-bottom));
  516. }
  517. .video_file {
  518. width: 100%;
  519. height: 100%;
  520. }
  521. .content_bottom_box {
  522. position: absolute;
  523. bottom: 0rpx;
  524. width: 100%;
  525. padding: 0 0rpx 40rpx 0rpx;
  526. background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  527. // align-items: flex-start;
  528. z-index: 1;
  529. }
  530. .content_goods_info {
  531. height: 49rpx;
  532. // flex-direction: row;
  533. align-items: center;
  534. background-color: rgba($color: #000000, $alpha: 0.4);
  535. padding: 0 12rpx;
  536. margin: 0 182rpx 0 40rpx;
  537. }
  538. .content_goods_info_image {
  539. width: 24rpx;
  540. height: 24rpx;
  541. }
  542. .content_goods_info_text {
  543. font-size: 24rpx;
  544. color: #ffffff;
  545. margin-left: 12rpx;
  546. }
  547. .content_user_name {
  548. font-size: 36rpx;
  549. color: #ffffff;
  550. font-weight: bold;
  551. margin: 70rpx 182rpx 0 40rpx;
  552. }
  553. .content_description {
  554. font-size: 28rpx;
  555. color: #ffffff;
  556. margin: 30rpx 182rpx 0 40rpx;
  557. }
  558. .right_suspended {
  559. position: fixed;
  560. right: 30rpx;
  561. bottom: 280rpx;
  562. align-items: center;
  563. z-index: 999
  564. }
  565. .suspended_user_info {
  566. position: relative;
  567. }
  568. .suspended_user_info_image {
  569. width: 120rpx;
  570. height: 120rpx;
  571. border: solid 2rpx #ffffff;
  572. border-radius: 50%;
  573. }
  574. .suspended_user_info_icon {
  575. width: 40rpx;
  576. height: 40rpx;
  577. position: absolute;
  578. bottom: 0;
  579. left: 50%;
  580. transform: translateX(-50%) translateY(50%);
  581. }
  582. .suspended_features_item {
  583. align-items: center;
  584. position: relative;
  585. margin-top: 60rpx;
  586. color: #FFFFFF;
  587. }
  588. .suspended_features_icon {
  589. width: 48rpx;
  590. height: 48rpx;
  591. }
  592. .suspended_features_text {
  593. margin-top: 12rpx;
  594. font-size: 28rpx;
  595. color: #ffffff;
  596. }
  597. .suspended_features_dot {
  598. font-size: 20rpx;
  599. color: #ffffff;
  600. position: absolute;
  601. top: -10rpx;
  602. right: 0;
  603. transform: translateX(50%);
  604. height: 24rpx;
  605. background-color: #ff3682;
  606. border-radius: 12rpx;
  607. line-height: 24rpx;
  608. padding: 0 9rpx;
  609. }
  610. .model {
  611. position: fixed;
  612. width: 100%;
  613. height: 100%;
  614. left: 0;
  615. right: 0;
  616. top: 0;
  617. bottom: 0;
  618. margin: auto;
  619. z-index: 9999;
  620. background: rgba(0, 0, 0, 0.5);
  621. font-size: 18px;
  622. }
  623. .model-home {
  624. width: 135px;
  625. height: 100px;
  626. position: fixed;
  627. right: 24px;
  628. top: 32px;
  629. text-align: center;
  630. color: #FFFFFF;
  631. }
  632. .model-close {
  633. width: 100%;
  634. height: 100px;
  635. position: fixed;
  636. right: 24px;
  637. top: 200px;
  638. text-align: right;
  639. color: #FFFFFF;
  640. }
  641. .model-img {
  642. width: 50px;
  643. height: 50px;
  644. }
  645. .model_s {
  646. height: 100%;
  647. width: 100%;
  648. position: fixed;
  649. z-index: 999;
  650. left: 0;
  651. top: 0;
  652. background: rgba(0, 0, 0, 0.5);
  653. }
  654. .model_s_pa {
  655. position: absolute;
  656. width: 300rpx;
  657. height: 300rpx;
  658. }
  659. .model_s_sz {
  660. width: 160rpx;
  661. height: 160rpx;
  662. // margin-top: 52rpx;
  663. // margin-left: 24rpx;
  664. margin: 0 auto;
  665. margin-top: 72rpx;
  666. margin-left: 86rpx;
  667. }
  668. .model_s_text {
  669. font-size: 40rpx;
  670. color: #FFFFFF;
  671. }
  672. .container_title {
  673. font-size: 48rpx;
  674. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  675. margin-top: 90rpx;
  676. padding: 0 20rpx;
  677. }
  678. /************以下为具体实现************/
  679. .wave {
  680. position: relative;
  681. width: 300rpx;
  682. height: 300rpx;
  683. text-align: center;
  684. font-size: 28rpx;
  685. margin: 0 auto;
  686. }
  687. .wave .circle {
  688. position: absolute;
  689. border-radius: 50%;
  690. opacity: 0;
  691. }
  692. /* 波纹效果 */
  693. .wave.ripple .circle {
  694. width: calc(100% - 6px);
  695. /* 减去边框的大小 */
  696. height: calc(100% - 6px);
  697. /* 减去边框的大小 */
  698. border: 3px solid #fff;
  699. }
  700. .wave.ripple .circle:first-child {
  701. animation: circle-opacity 2s infinite;
  702. }
  703. .wave.ripple .circle:nth-child(2) {
  704. animation: circle-opacity 2s infinite;
  705. animation-delay: 0.3s;
  706. }
  707. .wave.ripple .circle:nth-child(3) {
  708. animation: circle-opacity 2s infinite;
  709. animation-delay: 0.6s;
  710. }
  711. .wave.ripple .circle:nth-child(4) {
  712. animation: circle-opacity 2s infinite;
  713. animation-delay: 0.8s;
  714. }
  715. .wave.ripple .circle:nth-child(5) {
  716. animation: circle-opacity 2s infinite;
  717. animation-delay: 1s;
  718. }
  719. .wave.ripple .circle:nth-child(6) {
  720. animation: circle-opacity 2s infinite;
  721. animation-delay: 1.2s;
  722. }
  723. .wave.ripple.danger {
  724. color: #FFFFFF;
  725. }
  726. .wave.ripple.danger .circle {
  727. border-color: #FFFFFF;
  728. }
  729. .wave.ripple.warning {
  730. color: orange;
  731. }
  732. .wave.ripple.warning .circle {
  733. border-color: orange;
  734. }
  735. @keyframes circle-opacity {
  736. from {
  737. opacity: 1;
  738. transform: scale(0);
  739. }
  740. to {
  741. opacity: 0;
  742. transform: scale(1);
  743. }
  744. }
  745. </style>