|
@@ -0,0 +1,702 @@
|
|
|
+@charset "UTF-8";
|
|
|
+/**
|
|
|
+ * 这里是uni-app内置的常用样式变量
|
|
|
+ *
|
|
|
+ * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
|
|
+ * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
|
|
+ *
|
|
|
+ */
|
|
|
+/**
|
|
|
+ * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
|
|
+ *
|
|
|
+ * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
|
|
+ */
|
|
|
+/* 颜色变量 */
|
|
|
+/* 行为相关颜色 */
|
|
|
+/* 文字基本颜色 */
|
|
|
+/* 背景颜色 */
|
|
|
+/* 边框颜色 */
|
|
|
+/* 尺寸变量 */
|
|
|
+/* 文字尺寸 */
|
|
|
+/* 图片尺寸 */
|
|
|
+/* Border Radius */
|
|
|
+/* 水平间距 */
|
|
|
+/* 垂直间距 */
|
|
|
+/* 透明度 */
|
|
|
+/* 文章场景相关 */
|
|
|
+/* 页面左右间距 */
|
|
|
+/* 文字尺寸 */
|
|
|
+/*文字颜色*/
|
|
|
+/* 边框颜色 */
|
|
|
+/* 图片加载中颜色 */
|
|
|
+/* 行为相关颜色 */
|
|
|
+page {
|
|
|
+ /* background: $page-color-base; */
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+}
|
|
|
+.icon-you {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
+.carousel {
|
|
|
+ height: 722rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.carousel swiper {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.carousel .image-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.carousel .swiper-item {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-align-content: center;
|
|
|
+ align-content: center;
|
|
|
+ height: 750rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.carousel .swiper-item image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.titleLayout {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -webkit-justify-content: space-between;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+}
|
|
|
+/* 标题简介 */
|
|
|
+.introduce-section {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+}
|
|
|
+.introduce-section .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #303133;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ width: 70%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.introduce-section .titleRight {
|
|
|
+ border-left: 1px solid #F5F5F5;
|
|
|
+ padding-left: 32rpx;
|
|
|
+}
|
|
|
+.introduce-section .price-box {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: baseline;
|
|
|
+ -webkit-align-items: baseline;
|
|
|
+ align-items: baseline;
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+.introduce-section .price {
|
|
|
+ font-size: 34rpx;
|
|
|
+}
|
|
|
+.introduce-section .m-price {
|
|
|
+ margin: 0 12rpx;
|
|
|
+ color: #909399;
|
|
|
+ text-decoration: line-through;
|
|
|
+}
|
|
|
+.introduce-section .coupon-tip {
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
+ background: #fa436a;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ line-height: 1;
|
|
|
+ -webkit-transform: translateY(-4rpx);
|
|
|
+ transform: translateY(-4rpx);
|
|
|
+}
|
|
|
+.introduce-section .bot-row {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+.introduce-section .bot-row text {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+/* 分享 */
|
|
|
+.share-section {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #606266;
|
|
|
+ background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
+ background: linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
+ padding: 12rpx 30rpx;
|
|
|
+}
|
|
|
+.share-section .share-icon {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+ border: 1px solid #fa436a;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+.share-section .share-icon:after {
|
|
|
+ content: '';
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: -20rpx;
|
|
|
+ top: -12rpx;
|
|
|
+ position: absolute;
|
|
|
+ background: #fa436a;
|
|
|
+}
|
|
|
+.share-section .icon-xingxing {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.share-section .tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+.share-section .icon-bangzhu1 {
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.share-section .share-btn {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+.share-section .icon-you {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+.c-list {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #606266;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 20rpx solid #F5F5F5;
|
|
|
+ border-bottom: 20rpx solid #F5F5F5;
|
|
|
+}
|
|
|
+.c-list .c-row {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.c-list .tit {
|
|
|
+ width: 140rpx;
|
|
|
+}
|
|
|
+.c-list .con {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.c-list .con .selected-text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+.c-list .bz-list {
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.c-list .bz-list text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30rpx;
|
|
|
+}
|
|
|
+.c-list .con-list {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.c-list .red {
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+/* 评价 */
|
|
|
+.eva-section {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+.eva-section .e-header {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+.eva-section .e-header .tit {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #303133;
|
|
|
+ margin-right: 4rpx;
|
|
|
+}
|
|
|
+.eva-section .e-header .tip {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.eva-section .e-header .icon-you {
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+.eva-box {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0;
|
|
|
+}
|
|
|
+.eva-box .portrait {
|
|
|
+ -webkit-flex-shrink: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 100px;
|
|
|
+}
|
|
|
+.eva-box .right {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #606266;
|
|
|
+ padding-left: 26rpx;
|
|
|
+}
|
|
|
+.eva-box .right .con {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #303133;
|
|
|
+ padding: 20rpx 0;
|
|
|
+}
|
|
|
+.eva-box .right .bot {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -webkit-justify-content: space-between;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+/* 详情 */
|
|
|
+.detail-desc {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+.detail-desc .d-header {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #303133;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.detail-desc .d-header text {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.detail-desc .d-header:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ -webkit-transform: translateX(-50%);
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 300rpx;
|
|
|
+ height: 0;
|
|
|
+ content: '';
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+}
|
|
|
+/* 规格选择弹窗 */
|
|
|
+.attr-content {
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+}
|
|
|
+.attr-content .a-t {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.attr-content .a-t image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ -webkit-flex-shrink: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-top: -40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+.attr-content .a-t .right {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 42rpx;
|
|
|
+ -webkit-justify-content: space-around;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.attr-content .a-t .right .price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fa436a;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.attr-content .a-t .right .selected-text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+.attr-content .attr-list {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #606266;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+.attr-content .item-list {
|
|
|
+ padding: 20rpx 0 0;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.attr-content .item-list text {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #eee;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ min-width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.attr-content .item-list .selected {
|
|
|
+ background: #fbebee;
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+/* 弹出层 */
|
|
|
+.popup {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 100rpx;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+.popup.show {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.popup.show .mask {
|
|
|
+ -webkit-animation: showPopup 0.2s linear both;
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
+}
|
|
|
+.popup.show .layer {
|
|
|
+ -webkit-animation: showLayer 0.2s linear both;
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+}
|
|
|
+.popup.hide .mask {
|
|
|
+ -webkit-animation: hidePopup 0.2s linear both;
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
+}
|
|
|
+.popup.hide .layer {
|
|
|
+ -webkit-animation: hideLayer 0.2s linear both;
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+}
|
|
|
+.popup.none {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.popup .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 90%;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+.popup .layer {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ bottom: 100rpx;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40vh;
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.popup .layer .btn {
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #fa436a;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin: 30rpx auto 20rpx;
|
|
|
+}
|
|
|
+@-webkit-keyframes showPopup {
|
|
|
+0% {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+100% {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+}
|
|
|
+@keyframes showPopup {
|
|
|
+0% {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+100% {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+}
|
|
|
+@-webkit-keyframes hidePopup {
|
|
|
+0% {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+90% {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+}
|
|
|
+@keyframes hidePopup {
|
|
|
+0% {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+90% {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+}
|
|
|
+@-webkit-keyframes showLayer {
|
|
|
+0% {
|
|
|
+ -webkit-transform: translateY(120%);
|
|
|
+ transform: translateY(120%);
|
|
|
+}
|
|
|
+100% {
|
|
|
+ -webkit-transform: translateY(0%);
|
|
|
+ transform: translateY(0%);
|
|
|
+}
|
|
|
+}
|
|
|
+@keyframes showLayer {
|
|
|
+0% {
|
|
|
+ -webkit-transform: translateY(120%);
|
|
|
+ transform: translateY(120%);
|
|
|
+}
|
|
|
+100% {
|
|
|
+ -webkit-transform: translateY(0%);
|
|
|
+ transform: translateY(0%);
|
|
|
+}
|
|
|
+}
|
|
|
+@-webkit-keyframes hideLayer {
|
|
|
+0% {
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+100% {
|
|
|
+ -webkit-transform: translateY(120%);
|
|
|
+ transform: translateY(120%);
|
|
|
+}
|
|
|
+}
|
|
|
+@keyframes hideLayer {
|
|
|
+0% {
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+100% {
|
|
|
+ -webkit-transform: translateY(120%);
|
|
|
+ transform: translateY(120%);
|
|
|
+}
|
|
|
+}
|
|
|
+.van-sticky {
|
|
|
+ /* z-index: 0!important; */
|
|
|
+}
|
|
|
+/* 底部操作菜单 */
|
|
|
+.page-bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ z-index: 99;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+}
|
|
|
+.page-bottom .p-b-btn {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #606266;
|
|
|
+ width: 96rpx;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
+.page-bottom .p-b-btn .yticon {
|
|
|
+ font-size: 40rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+.page-bottom .p-b-btn.active, .page-bottom .p-b-btn.active .yticon {
|
|
|
+ color: #fa436a;
|
|
|
+}
|
|
|
+.page-bottom .p-b-btn .icon-fenxiang2 {
|
|
|
+ font-size: 42rpx;
|
|
|
+ -webkit-transform: translateY(-2rpx);
|
|
|
+ transform: translateY(-2rpx);
|
|
|
+}
|
|
|
+.page-bottom .p-b-btn .icon-shoucang {
|
|
|
+ font-size: 46rpx;
|
|
|
+}
|
|
|
+.page-bottom .action-btn-group {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ height: 76rpx;
|
|
|
+ border-radius: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
|
|
|
+ box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+ background: -webkit-linear-gradient(left, #ffac30, #fa436a, #F56C6C);
|
|
|
+ background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
|
|
|
+ margin-left: 20rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.page-bottom .action-btn-group:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 50%;
|
|
|
+ -webkit-transform: translateY(-50%);
|
|
|
+ transform: translateY(-50%);
|
|
|
+ height: 28rpx;
|
|
|
+ width: 0;
|
|
|
+ border-right: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
+.page-bottom .action-btn-group .action-btn {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|