* { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #92DAFF; } #app { width: 100%; min-height: 100vh; padding-bottom: 0.4rem; position: relative; background: #92D9FF; /* background-color: #b0b5b8; */ /* background: url("https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/banner1.png?v=222") no-repeat; background-size: cover; background-position: center; */ } .main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; padding-bottom: 0.2rem; } .banner { width: 100%; height: 2.58rem; margin-bottom: -0.02rem; } .back { position: absolute; margin-top: 0.7rem; width: 0.47rem; height: 0.22rem; background: #1FCDFC; color: #FFFFFF; border-radius: 0rem 0.26rem 0.26rem 0rem; } .back-2 { position: absolute; margin-top: 0.7rem; width: 0.47rem; height: 0.22rem; background: #E8F6FF; ; color: #FFFFFF; border-radius: 0rem 0.26rem 0.26rem 0rem; } .back-text { position: relative; /* width: 0.24rem; */ height: 0.16rem; font-family: PingFang SC, PingFang SC; font-weight: 400; font-weight: normal; font-size: 0.12rem; color: #FFFFFF; line-height: 0.16rem; text-align: left; font-style: normal; text-transform: none; /* 上右下左 */ margin: 0.03rem 0.11rem 0.03rem 0.09rem; } .back-text-2 { position: relative; /* width: 0.24rem; */ height: 0.16rem; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 0.12rem; color: #1D82DA; line-height: 0.16rem; text-align: left; font-style: normal; text-transform: none; /* 上右下左 */ margin: 0.03rem 0.11rem 0.03rem 0.09rem; } .buy { position: absolute; margin: 0.73rem 0rem 6.35rem 3.25rem; width: auto; height: 0.13rem; background: #1FCDFC; border-radius: 26px 0px 0px 26px; } .buy-2 { position: absolute; margin: 0.94rem 0rem 6.14rem 3.24rem; width: auto; height: 0.13rem; background: #1FCDFC; border-radius: 26px 0px 0px 26px; } .buy .buy-text { position: relative; margin: 0rem 0.05rem 0.01rem 0.06rem; width: 0.5rem; height: 0.14rem; font-family: PingFang SC, PingFang SC; font-weight: normal; font-size: 0.10rem; color: #FFFFFF; line-height: 0.14rem; text-align: left; font-style: normal; text-transform: none; } .buy-2 .buy-text { position: relative; margin: 0rem 0.05rem 0.01rem 0.06rem; width: 0.45rem; height: 0.14rem; font-family: PingFang SC, PingFang SC; font-weight: normal; font-size: 0.10rem; color: #FFFFFF; line-height: 0.14rem; text-align: left; font-style: normal; text-transform: none; } .goods-box { width: 3.66rem; height: 4.60rem; /* background: rgba(46,182,230,0.5); border-radius: 0.15rem; */ display: flex; justify-content: center; align-items: center; margin: 2.58rem auto 0 auto; } .goods-box-2 { width: 3.67rem; height: 3.50rem; /* background: rgba(46,182,230,0.5); border-radius: 0.15rem; */ display: flex; justify-content: center; align-items: center; margin: 3.56rem auto 0 auto; } .goods-list-box-bg { width: 3.36rem; height: 4.43rem; /* background-color: #fff; border-radius: 0.14rem; */ position: absolute; } .goods-list-box-bg-2 { width: 3.36rem; /* height: 4.43rem; */ /* background-color: #fff; border-radius: 0.14rem; */ position: absolute; } .goods-list-box { width: 3.36rem; height: 4.43rem; /* background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/jb-kuang.png?v=222") no-repeat; background-size: 100%; */ border-radius: 0.14rem; padding: 0 0.1rem; } .goods-list-box { /* background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/jb-kuang.png?v=222") no-repeat; background-size: 100%; */ border-radius: 0.14rem; padding: 0 0.1rem; } .goods-title { width: 1.2rem; height: 0.16rem; font-family: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20'; font-weight: 400; font-size: 0.16rem; color: #FFFFFF; line-height: 0.16rem; text-align: center; font-style: normal; text-transform: none; text-align: center; /* padding: 0.17rem 0 0.05rem 0; */ position: relative; margin: 0.03rem 1.31rem 0.18rem 1.01rem; } .goods-title-2 { width: 1.2rem; height: 0.16rem; font-family: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20'; font-weight: 400; font-size: 0.16rem; color: #FFFFFF; line-height: 0.16rem; text-align: center; font-style: normal; text-transform: none; text-align: center; /* padding: 0.17rem 0 0.05rem 0; */ position: relative; margin: -0.1rem 1.31rem 0.18rem 1.15rem; } .goods-info { width: 1.48rem; height: 0.96rem; position: relative; margin-top: 0.1rem; } .goods-info img { width: 100%; height: 100%; position: absolute; z-index: 0; } .goods-info-2 { width: 1.53rem; height: 0.96rem; position: relative; margin-top: 0.1rem; } .goods-info-2 img { width: 100%; height: 100%; position: absolute; z-index: 0; } .goods-info img { width: 100%; height: 100%; position: absolute; z-index: 0; } .goods-info-text { position: absolute; z-index: 1; } .goods-name { font-size: 0.13rem; color: #ffffff; padding: 0.11rem 0 0 0.08rem; } .goods-type { font-size: 0.115rem; color: #ffffff; padding: 0.04rem 0 0 0.08rem; } .goods-checked { width: 0.2rem; height: 0.2rem; background-color: #fff; border: 1px solid #4a98fb; border-radius: 50%; position: absolute; top: 0.1rem; right: 0.1rem; display: flex; justify-content: center; align-items: center; } .goods-price { width: 0.35rem; height: 0.14rem; font-family: D-DIN, D-DIN; font-weight: 700; font-size: 0.15rem; color: #FFFFFF; line-height: 0.14rem; text-align: center; font-style: normal; text-transform: none; position: absolute; top: 0.67rem; left: 0.07rem; display: flex; } .goods-showprice { /* 加横线 */ /* width: 0.35rem; */ height: 0.14rem; font-family: D-DIN, D-DIN; font-weight: 400; font-size: 0.08rem; color: #FFD9D9; line-height: 0.14rem; text-align: center; font-style: normal; text-decoration-line: line-through; text-transform: none; position: absolute; top: 0.68rem; left: 0.55rem; display: flex; } .goods-main { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0rem 0.05rem 0rem 0.05rem; } .goods-main-2 { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0rem 0.09rem 0rem 0.09rem; } .goods-btn { width: 1.37rem; height: 0.5rem; background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/btn.png") no-repeat; background-size: 100%; margin: 0.2rem auto 0; font-size: 0.16rem; color: #ffffff; text-align: center; line-height: 0.47rem; } .pop { width: 100%; min-height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 99; } .pop-main { width: 2.9rem; height: 3.42rem; position: relative; margin: 1.2rem auto 0 auto; display: flex; flex-wrap: wrap; justify-content: center; } .pop-main img { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; } .pop-info, .pop-footer { position: relative; z-index: 2; text-align: center; } .pop-info { padding-top: 1.5rem; } .pop-title { width: 1.2rem; height: 0.39rem; position: relative; left: 0.7rem; } .pop-title-fail { width: 1.2rem; height: 0.39rem; position: fixed; margin: 0rem 0rem 0rem 0.5rem; /* left: 0.1rem; */ } .pop-info .pop-msg { display: flex; /* 使用Flexbox布局 */ flex-direction: row; /* 水平方向 */ font-size: 0.14rem; color: #00a5eb; padding: 0.17rem 0.2rem 0 0.2rem; margin-left: 0.6rem; margin-top: -0.13rem; } .pop-info .pop-phone { display: flex; /* 使用Flexbox布局 */ flex-direction: row; /* 水平方向 */ font-size: 0.14rem; font-weight: 400; color: #00A5EB; margin-top: 0.6rem; } .pop-goods-name{ font-family: 'PingFang SC'; font-weight: 400; font-size: 0.16rem; color: #00A5EB; line-height: 0.22rem; text-align: left; font-style: normal; text-transform: none; } .pop-goods-price{ font-family: 'PingFang SC'; font-weight: 400; font-size: 0.16rem; line-height: 0.22rem; text-align: left; font-style: normal; text-transform: none; color: #EB0000; } .pop-info .pop-pip { font-size: 0.1rem; color: #69d2ff; padding-top: 0.07rem; } .pop-footer { width: 2.8rem; height: 0.36rem; display: flex; justify-content: space-around; } .pop-footer button { width: 1.18rem; height: 0.36rem; font-size: 0.16rem; color: #ffffff; border: none; border-radius: 0.18rem; } .close-btn { background: linear-gradient(180deg, #88def0 0%, #69b5d8 100%); } .ok-btn { background: linear-gradient(180deg, #88def0 0%, #69b5d8 100%); } .grayscale-image { filter: grayscale(100%); }