123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969 |
- <template>
- <view class="container">
- <view class="view-alert" v-if="showHint">
- <view class="alert-text">
- 点击右上角按钮,然后在弹出的菜单中,点击在浏览器中打开。
- </view>
- <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
- </view>
- <view class="product">
- <view class="u-bg-fff pb40">
- <view class="pic">
- <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
- <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular="true">
- <swiper-item v-if="dataForm.video_url">
- <video :src="dataForm.video_url" style="height:100%"></video>
- </swiper-item>
- <swiper-item v-for="(item, index) in imglist" :key="index">
- <image :src="item" mode="aspectFill"></image>
- </swiper-item>
- </swiper>
- <view class="p-price">
- <view class="pd24 u-flex-center">
- <view class="u-FFF u-font36" v-if="type == 1">
- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text>
- </view>
- <view class="u-FFF u-font36" v-if="type == 2 || type == 3">
- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
- </view>
- <view class="u-FFF u-font36" v-if="type == 5">
- {{ dataForm.min_exchange_point }}积分
- <!-- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text> -->
- </view>
- <text class="discount u-font24 u-ml20 u-del" v-if="type == 1">¥{{ dataForm.max_market_price }}</text>
- <text class="discount u-font24 u-ml20 u-del"
- v-if="type == 2 || type == 3">¥{{ dataForm.max_sale_price }}</text>
- </view>
- <view class="p-ab u-flex-center" v-if="type == 2 || type == 3">
- <view class="triangle-bottomright"></view>
- <view class="seckill u-text-center u-font28">
- <!-- active_state 0:未开始 * 1:进行中 * 2:已结束 -->
- <view class="u-bold" v-if="dataForm.active_state == 2">已结束</view>
- <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>
- <view class="u-bold" v-if="dataForm.active_state == 0">离开抢</view>
- <view v-if="dataForm.active_state != 2">
- <uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#00321e'"
- :splitorColor="'#00321e'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
- :minute="time1[2]" :second="time1[3]"></uni-countdown>
- </view>
- </view>
- </view>
- </view>
- <view class="mt30 u-plr30">
- <view>
- <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
- </view>
- <view class="u-font24 u-mt15 u-999" v-if="type==1 ">
- <text>已售
- <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件,仅剩<text class="u-FF0000">{{
- dataForm.residual_inventory
- }}</text>件</text>
- </view>
- <view class="u-font24 u-mt15 u-999" v-else>
- <text>已售
- <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件</text>
- </view>
- </view>
- </view>
- </view>
- <view class="u-bg-fff u-mt10">
- <view class="u-plr30 u-flex-center-sb pt-pb35">
- <view class="u-flex-center">
- <view>
- <image class="u-avatar104" :src="shop.logo"></image>
- </view>
- <view class="u-ml25">
- <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
- <view class="u-999 u-font24 u-mt5 u-text2">
- <text class="iconfont u-193E2C"></text>
- {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
- }}{{ shop.address }}
- </view>
- </view>
- </view>
- <!-- <view class="iconfont"></view> -->
- </view>
- </view>
- <view class="u-bg-fff u-mt10">
- <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
- :style="`top: calc(${statusBarHeight}px + 44px)`">
- <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
- <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">
- 用户评论({{ commentList.length }})</view>
- </view>
- <view class="u-mt10">
- <!--商品详情-->
- <view v-if="isChecked == 0">
- <view class="richText ql-editor-box">
- <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
- </view>
- </view>
- <!--评论-->
- <view class="u-plr30" v-else>
- <comment :value="commentList"></comment>
- </view>
- </view>
- </view>
- </view>
- <view class="bottom-btn u-bg-fff">
- <view class="pt-pb30 u-plr30 u-flex-center-sb">
- <view class="leftbox">
- <button @click="handleTip()" class="u-text-center goods-tools">
- <view class="iconfont2 u-font44 u-999"></view>
- <view class="u-font28 u-1A1A1A">分享</view>
- </button>
- <view class="goods-tools service" @click="handleTip()">
- <image src="@/static/kefu.png" mode="aspectFill"></image>
- <view class="u-font28 u-1A1A1A">客服</view>
- </view>
- <view class="cart" @click="handleTip()">
- <view class="u-text-center goods-tools">
- <view class="iconfont2 car-icon u-font44 u-999"></view>
- <view class="u-font28 u-1A1A1A">购物车</view>
- </view>
- </view>
- </view>
- <!--普通商品-->
- <view class="u-flex-center">
- <button class="cart-btn u-font30" @click="handleTip()" v-if="dataForm.area_feature != 1">
- 加入购物车
- </button>
- <button class="buy-btn u-font30" @click="handleTip()">
- 立即购买
- </button>
- </view>
- </view>
- </view>
- <view class="jump-box" @click="openApp">
- <image class="logo-img" src="/static/logo.png" mode="aspectFill"></image>
- <view class="tip">打开宜格服务APP</view>
- </view>
- <ldLoading isFullScreen :active="loading"></ldLoading>
- </view>
- </template>
- <script>
- import comment from "@/components/ld-comment/ld-comment.vue";
- export default {
- components: {
- comment
- },
- data() {
- return {
- config: {
- back: false, //false是tolbar页面 是则不写
- title: "商品详情",
- color: "#FFFFFF",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#00321E"],
- statusBarFontColor: "#FFFFFF",
- backTabPage: "",
- },
- //手机状态栏高度
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
- imglist: [], //详情图片数组
- dataForm: {}, //商品详情
- shop: {}, //店铺信息
- cover: "",
- loading: true,
- btnText: "打开App",
- time1: [0, 0, 0, 0],
- type: null,
- commentList: [],
- isChecked: 0,
- goodsInfo: {},
- timer: null,
- showHint: false,
- };
- },
- props: {
- options: {
- type: Object,
- default: null,
- },
- },
- watch: {
- options(n) {
- this.options = n;
- },
- },
- created() {
- this.type = this.options.type;
- if ((this.options.type == 1 || this.options.type == 5) && this.options.id) {
- this.getDefaultDetailInfo(this.options.id);
- }
- if (this.options.type == 2 && this.options.id) {
- this.getSeckillDetail(this.options.id);
- }
- if (this.options.type == 3 && this.options.id) {
- this.getGroupsDetailInfo(this.options.id);
- }
- if (this.options.type == 4 && this.options.id) {
- this.getserviceDetailInfo(this.options.id);
- }
- this.goodsDetail(this.options.id)
- this.loadComment(this.options.id);
- },
- onShow() {
- document.addEventListener("visibilitychange", function() {
- if (that.timer) {
- that.opening = false
- clearTimeout(that.timer)
- }
- }, false);
- },
- onLoad(options) {},
- methods: {
- openApp() {
- const ua = navigator.userAgent.toLowerCase()
- const isWeixin = ua.indexOf('micromessenger') != -1;
- if(isWeixin){
- this.showHint = isWeixin;
- uni.pageScrollTo({
- scrollTop:0
- })
- }else{
- const osName = uni.getSystemInfoSync().osName
- if (osName == 'android') {
- this.getData(0)
- } else {
- this.getData(1)
- }
- }
- },
- getData(type) {
- this.$http.get("/app/version/newest", {
- type: type
- }).then((res) => {
- if (res && res.data && res.code == 200) {
- // try {
- // if (type == 0) {
- // window.location = "ygfwUrlSchemes://"
- // }
- // } catch (e) {}
- // window.location.href = res.data.downloadLink;
- this.browserOpenApp(type, res.data.downloadLink)
- } else {
- this.$mUtil.toast("暂无下载地址")
- }
- });
- },
- browserOpenApp(type, url) {
- let that = this
- that.opening = true
- if (type == 0) { // 安卓处理
- let ifr = document.createElement('iframe');
- ifr.src = `ygfwUrlSchemes://goodsTypeJump=${this.options.type}&goodsIdJump=${this.options.id}`;
- ifr.style.display = 'none';
- document.body.appendChild(ifr);
- that.timer = window.setTimeout(function() { // 未安装的情况
- that.opening = false
- document.body.removeChild(ifr);
- // 提示下载
- let r = confirm("未安装APP? 是否去下载页下载!")
- if (r) {
- uni.navigateTo({
- url: '/pages/down'
- })
- }
- }, 5000)
- } else { // IOS处理
- let url = `ygfwUrlSchemes://goodsTypeJump=${this.options.type}&goodsIdJump=${this.options.id}`
- alert(url)
- window.location = url
- that.timer = setTimeout(function() { // 未安装的情况
- that.opening = false
- // 跳转app store
- let r = confirm("未安装APP? 是否去下载页下载!")
- if (r) {
- uni.navigateTo({
- url: '/pages/down'
- })
- }
- }, 5000);
- }
- },
- handleTip() {
- uni.showToast({
- title: '请前往宜格服务APP操作!',
- icon: 'none',
- duration: 2000
- })
- },
- // 获取主页数据
- getIndexList(shopid) {
- this.$shopHttp.get("/yxt/shop/info/" + shopid).then((res) => {
- uni.stopPullDownRefresh();
- this.loading = false;
- if (res.data && res.code == 200) {
- this.shop = res.data;
- }
- });
- },
- //普通商品
- getDefaultDetailInfo(id) {
- this.$shopHttp.get("/goods/info/" + id).then((res) => {
- this.loading = false;
- if (res && res.code == 200) {
- this.dataForm = res.data;
- this.goodsId = res.data.id;
- this.imglist = res.data.images;
- this.shareImg = res.data.cover;
- this.shareTitle = res.data.title;
- if (res.data.point_goods) {
- this.type = 5;
- }
- this.getIndexList(res.data.shop_id);
- }
- });
- },
- /**组团商品*/
- getGroupsDetailInfo(id) {
- this.$shopHttp.get("/groupbuy/activitygoods/goodsInfo/" + id).then((res) => {
- this.loading = false;
- if (res && res.code == 200) {
- this.dataForm = res.data;
- this.goodsId = res.data.id;
- this.imglist = res.data.cover.split(",");
- this.getIndexList(res.data.shop_id);
- if (res.data.active_state == 0) {
- this.time1 = this.$mUtil
- .countDown(res.data.activity_start_time)
- .split(":");
- } else {
- this.time1 = this.$mUtil
- .countDown(res.data.finish_time)
- .split(":")
- .map((val) => Number(val));
- }
- }
- });
- },
- getSeckillDetail(id) {
- this.$shopHttp
- .get("/marketing/seckillActivityGoods/info/" + id)
- .then((res) => {
- this.loading = false;
- if (res && res.code == 200) {
- this.dataForm = res.data;
- this.goodsId = res.data.id;
- this.$shopHttp.get("/yxt/shop/info/" + res.data.shop_id).then((res) => {
- if (res.data && res.code == 200) {
- this.shop = res.data;
- }
- });
- this.imglist = res.data.cover.split(",");
- if (res.data.active_state == 0) {
- this.time1 = this.$mUtil
- .countDown(res.data.activity_start_time)
- .split(":");
- } else {
- this.time1 = this.$mUtil
- .countDown(res.data.finish_time)
- .split(":");
- }
- }
- });
- },
- getserviceDetailInfo(id) {
- this.$shopHttp.get("/service/goods/info/" + id).then((res) => {
- this.loading = false;
- if (res && res.code == 200) {
- this.dataForm = res.data;
- this.goodsId = res.data.id;
- this.imglist = res.data.images;
- this.shareImg = res.data.cover;
- this.shareTitle = res.data.title;
- this.getIndexList(res.data.shop_id);
- }
- });
- },
- /**
- * 详情
- * */
- goodsDetail(id) {
- this.$shopHttp.get(`/goods/content/${id}`).then((res) => {
- if (res && res.code == 200) {
- this.goodsInfo = res.data;
- }
- });
- },
- /*评论*/
- loadComment(id) {
- this.$shopHttp
- .get(`/comment/orderGoods/getgoodscomments/${id}`)
- .then((res) => {
- if (res && res.code == 200) {
- this.commentList = res.list;
- }
- });
- },
- //评论,商品详情切换
- change(i) {
- this.isChecked = i;
- },
- },
- };
- </script>
- <style lang="scss">
- page {
- background-color: #f5f5f5;
- }
- .pd24 {
- padding: 24rpx;
- }
- .pd20 {
- padding: 20rpx;
- }
- .pt20-pb14 {
- padding-top: 20rpx;
- padding-bottom: 14rpx;
- }
- .pt28-pb18 {
- padding-top: 28rpx;
- padding-bottom: 18rpx;
- }
- .pb30 {
- padding-bottom: 30rpx;
- }
- .pb40 {
- padding-bottom: 40rpx;
- }
- .pb50 {
- padding-bottom: 50rpx;
- }
- .pt-pb30 {
- padding-top: 30rpx;
- padding-bottom: 30rpx;
- }
- .pt-pb35 {
- padding-top: 35rpx;
- padding-bottom: 35rpx;
- }
- .ml54 {
- margin-left: 54rpx;
- }
- .ml138 {
- margin-left: 138rpx;
- }
- .br-rd10 {
- border-radius: 10rpx;
- }
- .br-rd20 {
- border-radius: 20rpx;
- }
- .stb-btn {
- padding: 8rpx 18rpx;
- border-radius: 10rpx;
- }
- .br-FF0000 {
- border: 1rpx solid #ff0000;
- border-radius: 24rpx;
- padding: 6rpx 12rpx;
- }
- .bg-FFF6EE {
- background-color: #fff6ee;
- }
- .mt30 {
- margin-top: 30rpx;
- }
- .product {
- padding-bottom: 150rpx;
- }
- .pic {
- width: 100%;
- position: relative;
- .swiper {
- height: 700rpx;
- video {
- width: 100%;
- height: 700rpx;
- }
- image {
- width: 100%;
- height: 700rpx;
- }
- }
- .p-price {
- width: 100%;
- position: absolute;
- top: 580rpx;
- background: #FA6138;
- position: relative;
- top: 0px;
- z-index: 9;
- .discount {
- color: #ffffff;
- }
- .p-ab {
- position: absolute;
- top: -5px;
- right: 0;
- }
- }
- }
- .richText {
- padding: 30rpx;
- /deep/ img {
- margin-top: 0 !important;
- vertical-align: middle;
- }
- }
- // 富文本展示
- .ql-editor-box {
- text-align: justify;
- /deep/ .ql-indent-1 {
- margin-left: 96rpx;
- }
- /deep/ .ql-indent-2 {
- margin-left: 192rpx;
- }
- /deep/ .ql-indent-3 {
- margin-left: 288rpx;
- }
- /deep/ .ql-indent-4 {
- margin-left: 384rpx;
- }
- /deep/ .ql-indent-5 {
- margin-left: 480rpx;
- }
- /deep/ .ql-indent-6 {
- margin-left: 576rpx;
- }
- /deep/ .ql-indent-7 {
- margin-left: 672rpx;
- }
- /deep/ .ql-indent-8 {
- margin-left: 768rpx;
- }
- /deep/ img {
- max-width: 100%;
- }
- /deep/ .ql-align-center {
- text-align: center;
- }
- /deep/ .ql-align-right {
- text-align: right;
- }
- /deep/ blockquote {
- display: block;
- border-left: 8px solid #d0e5f2;
- padding: 5px 10px;
- margin: 10px 0;
- line-height: 1.4;
- font-size: 100%;
- background-color: #f1f1f1;
- }
- /deep/ .ql-indent-1 {
- margin-left: 60rpx;
- }
- /deep/ .ql-indent-2 {
- margin-left: 120rpx;
- }
- /deep/ .ql-indent-3 {
- margin-left: 180rpx;
- }
- /deep/ .ql-indent-4 {
- margin-left: 240rpx;
- }
- /deep/ .ql-indent-5 {
- margin-left: 300rpx;
- }
- /deep/ .ql-size-huge {
- font-size: 80rpx;
- display: inline-block;
- line-height: 90rpx;
- }
- /deep/ .ql-size-large {
- font-size: 48rpx;
- display: inline-block;
- line-height: 50rpx;
- }
- /deep/ .ql-size-small {
- font-size: 24rpx;
- display: inline-block;
- line-height: 30rpx;
- }
- /deep/ .ql-font-serif {
- font-family: Georgia, Times New Roman, serif;
- }
- /deep/ .ql-font-monospace {
- font-family: Monaco, Courier New, monospace;
- }
- }
- //秒杀,拼团样式
- .p-ab {
- position: absolute;
- top: 448rpx;
- }
- .stb-list {
- padding-bottom: 10rpx;
- }
- .triangle-bottomright {
- width: 0;
- height: 0;
- border-bottom: 108rpx solid #FA6138;
- border-left: 60rpx solid transparent;
- }
- .seckill {
- background-color: #FA6138;
- color: #00321e;
- padding: 16rpx;
- padding-right: 28rpx;
- border-radius: 5rpx 20rpx 0px 0px;
- }
- .seckill-btn {
- width: 86%;
- }
- .br-284534 {
- border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
- }
- .gb-te {
- padding-top: 20rpx;
- padding-bottom: 15rpx;
- }
- .gb-btn {
- padding: 18rpx 80rpx 8rpx;
- line-height: 30rpx;
- }
- .btn-bg-dccda4 {
- background: #FA6138;
- border-radius: 48rpx 0rpx 0rpx 48rpx;
- }
- .btn-bg-00321E {
- background: #00321e;
- border-radius: 0px 48px 48px 0px;
- }
- .tab {
- position: sticky;
- top: 0;
- background-color: #fff;
- padding-top: 38rpx;
- z-index: 9;
- .pb30 {
- position: relative;
- &::before {
- content: '';
- position: absolute;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- width: 0;
- height: 2px;
- background: #FA6138;
- transition: all 0.3s;
- }
- &.active {
- font-size: 30rpx;
- color: #FA6138;
- font-weight: 700;
- &::before {
- width: 100%;
- }
- }
- }
- }
- .bottom-btn {
- width: 100%;
- position: fixed;
- bottom: 0;
- z-index: 9;
- border-top: 1rpx solid #e6e6e6;
- .leftbox {
- display: flex;
- align-items: center;
- height: 84rpx;
- .u-text-center {
- margin-right: 20rpx;
- }
- .service {
- image {
- width: 40rpx;
- height: 40rpx;
- margin: 0 auto;
- }
- margin-right: 20rpx;
- }
- }
- .cart {
- position: relative;
- .car-icon {
- position: relative;
- .nums {
- font-size: 20rpx;
- color: #FFFFFF;
- font-weight: 400;
- padding: 4rpx;
- height: 30rpx;
- min-width: 30rpx;
- line-height: 23rpx;
- background-color: #FF0000;
- border-radius: 15rpx;
- position: absolute;
- right: 5rpx;
- top: -10rpx;
- }
- }
- .number {
- position: absolute;
- top: -10rpx;
- left: 45rpx;
- padding: 4rpx 8rpx;
- background-color: #ff0000;
- border: 4rpx solid #ffffff;
- border-radius: 40rpx;
- }
- }
- .cart-btn {
- width: 200rpx;
- height: 85rpx;
- line-height: 85rpx;
- background: #FF9651;
- color: white;
- border-radius: 40rpx;
- margin-right: 10rpx;
- }
- .buy-btn {
- width: 200rpx;
- height: 85rpx;
- color: white;
- line-height: 85rpx;
- background: #FA6138;
- border-radius: 40rpx;
- margin-left: 10rpx;
- }
- }
- .flex-sb {
- display: flex;
- justify-content: space-between;
- }
- //弹窗
- .spec {
- border-radius: 18rpx 18rpx 0rpx 0rpx;
- padding-top: 30rpx;
- max-height: 900rpx;
- overflow-y: auto;
- .spec-item {
- background-color: #f6f6f6;
- border: 1px solid #f6f6f6;
- padding: 12rpx 30rpx;
- font-size: 24rpx;
- color: #1a1a1a;
- border-radius: 4px;
- }
- .activeColor {
- background-color: #e1e6e3;
- border: 1px solid #01321d;
- color: #01321d;
- border-radius: 4px;
- }
- .spec-item:not(:last-child) {
- margin-right: 24rpx;
- }
- //减号
- .minus {
- width: 50rpx;
- height: 50rpx;
- line-height: 50rpx;
- text-align: center;
- background: #dedede;
- border-radius: 8rpx 0rpx 0rpx 8rpx;
- }
- .num {
- width: 74rpx;
- height: 46rpx;
- line-height: 46rpx;
- text-align: center;
- border: 1px solid #dedede;
- }
- //加号
- .plus-sign {
- width: 50rpx;
- height: 50rpx;
- line-height: 50rpx;
- text-align: center;
- background: #dedede;
- border-radius: 0rpx 8rpx 8rpx 0rpx;
- }
- .specOpen-btn {
- margin-top: 68rpx;
- padding-bottom: 34rpx;
- button {
- background-color: #01331f;
- color: #ffffff;
- }
- }
- }
- .goods-tools {
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- height: 84rpx;
- line-height: 42rpx;
- }
- .jump-box {
- position: fixed;
- left: 50%;
- bottom: 200rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 350rpx;
- height: 80rpx;
- color: #fff;
- background-color: #6be5f8;
- border-radius: 40rpx;
- transform: translateX(-50%);
- z-index: 99;
- .logo-img {
- width: 40rpx;
- height: 40rpx;
- margin-right: 10rpx;
- box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
- }
- .tip {
- font-size: 28rpx;
- }
- }
-
- .view-alert {
- /* position: absolute;
- left: 0;
- top: 0;
- z-index: 9; */
- width: 750rpx;
- background: rgb(52, 52, 52);
- margin-left: 0px;
- margin-right: 0px;
- padding: 60rpx 30rpx 60rpx 60rpx;
- box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- box-sizing: border-box;
-
- .alert-text {
- flex: 1;
- color: #7f7e7e;
- font-weight: 400 !important;
- padding-right: 60rpx;
- line-height: 1.5;
- }
-
- .alert-arrow {
- flex-shrink: 0;
- width: 60rpx;
- height: 60rpx;
- margin-top: -30rpx;
- }
- }
- </style>
|