diff --git a/src/pages/frameDetail/components/BottomSheet.vue b/src/pages/frameDetail/components/BottomSheet.vue
index e138d5f..b214ec9 100644
--- a/src/pages/frameDetail/components/BottomSheet.vue
+++ b/src/pages/frameDetail/components/BottomSheet.vue
@@ -1,1161 +1,1232 @@
-
-
-
-
-
-
-
-
-
- {{goodInfo.p_name}}
-
-
- ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
- (限购{{maxCount}}副)
-
- -
- {{count}}
- +
-
-
-
-
-
- 选择使用人
-
-
- {{item.name}}
-
-
-
-
-
-
-
-
-
-
- 填写验光数据
-
- 没有验光数据？请到线下眼镜店验光哦～
-
-
-
- 验光单取名:
-
-
-
-
-
-
-
- {{pickerInfoList[0].nameC}}
- {{pickerInfoList[0].nameE}}
-
- 左 (OD)
-
-
-
- {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
-
-
-
-
- 右 (OS)
-
-
-
- {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
-
-
-
-
-
-
-
-
-
- {{pickerInfoList[1].nameC}}
- {{pickerInfoList[1].nameE}}
-
- 左 (OD)
-
-
-
- {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
-
-
-
-
- 右 (OS)
-
-
-
- {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
-
-
-
-
-
-
-
-
-
- {{pickerInfoList[2].nameC}}
- {{pickerInfoList[2].nameE}}
-
- 左 (OD)
-
-
- {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
-
-
-
- 右 (OS)
-
-
-
- {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
-
-
-
-
-
-
-
-
-
- 瞳距:
-
-
-
-
-
-
-
- {{pickerInfoList[3].nameC}}
-
- 年 (Y)
-
-
- {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
-
-
-
- 月 (M)
-
-
- {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
-
-
-
- 日 (D)
-
-
- {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
-
-
-
-
-
-
-
- 确认以上输入信息来源于我的验光数据!
-
-
-
-
-
-
- {{item.nameC}}
- {{item.nameArray1[item.nameIndex1]}}年
- {{item.nameArray2[item.nameIndex2]}}月
- {{item.nameArray3[item.nameIndex2]}}日
-
-
-
- *
-
-
- {{item.nameC}}
- 左 {{item.nameArray1[item.nameIndex1]}}
- 右 {{item.nameArray2[item.nameIndex2]}}
-
-
-
-
-
-
-
-
-
-
-
-
- {{one.name}}
-
-
-
-
- * {{attrList[index].attr[current[index]].name}}
-
-
-
- 加入购物车
-
-
- 立即结算
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {{goodInfo.p_name}}
+
+
+ ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
+ (限购{{maxCount}}副)
+
+ -
+ {{count}}
+ +
+
+
+
+
+
+ 选择使用人
+
+
+ {{item.name}}
+
+
+
+
+
+
+
+
+
+
+ 填写验光数据
+
+ 没有验光数据？请到线下眼镜店验光哦～
+
+
+
+ 验光单取名:
+
+
+
+
+
+
+
+ {{pickerInfoList[0].nameC}}
+ {{pickerInfoList[0].nameE}}
+
+ 左 (OD)
+
+
+
+ {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
+
+
+
+
+ 右 (OS)
+
+
+
+ {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
+
+
+
+
+
+
+
+
+
+ {{pickerInfoList[1].nameC}}
+ {{pickerInfoList[1].nameE}}
+
+ 左 (OD)
+
+
+
+ {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
+
+
+
+
+ 右 (OS)
+
+
+
+ {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
+
+
+
+
+
+
+
+
+
+ {{pickerInfoList[2].nameC}}
+ {{pickerInfoList[2].nameE}}
+
+ 左 (OD)
+
+
+ {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
+
+
+
+ 右 (OS)
+
+
+
+ {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
+
+
+
+
+
+
+
+
+
+ 瞳距:
+
+
+
+
+
+
+
+ {{pickerInfoList[3].nameC}}
+
+ 年 (Y)
+
+
+ {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
+
+
+
+ 月 (M)
+
+
+ {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
+
+
+
+ 日 (D)
+
+
+ {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
+
+
+
+
+
+
+
+ 确认以上输入信息来源于我的验光数据!
+
+
+
+
+
+
+ {{item.nameC}}
+ {{item.nameArray1[item.nameIndex1]}}年
+ {{item.nameArray2[item.nameIndex2]}}月
+ {{item.nameArray3[item.nameIndex2]}}日
+
+
+
+ *
+
+
+ {{item.nameC}}
+ 左 {{item.nameArray1[item.nameIndex1]}}
+ 右 {{item.nameArray2[item.nameIndex2]}}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{one.name}}
+
+
+
+
+ * {{attrList[index].attr[current[index]].name}}
+
+
+
+ 加入购物车
+
+
+ 立即结算
+
+
+
+
+
+.content {
+ min-height: 100vh;
+ background-color: #f2f2f2;
+ // padding-top: 20rpx;
+ .goodInfo {
+ width: 100%;
+ height: 272rpx;
+ border-radius: 16rpx;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ padding: 36rpx;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ .imageWrap {
+ height: 188rpx;
+ width: 188rpx;
+ margin-right: 28rpx;
+ image {
+ height: 188rpx;
+ width: 188rpx;
+ }
+ }
+ .infoRight {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ .goodName {
+ font-size: 28rpx;
+ color: #333333;
+ }
+ .remarks {
+ font-size: 20rpx;
+ color: #999999;
+ }
+ .priceBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ font-size: 14px;
+ color: #999999;
+ .price {
+ color: #ff6b4a;
+ font-size: 28rpx;
+ }
+ .counter {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 28rpx;
+ color: #333333;
+ width: 122rpx;
+ .btn {
+ display: flex;
+ justify-content: center;
+ line-height: 32rpx;
+ height: 32rpx;
+ width: 32rpx;
+ background-color: #f2f2f2;
+ color: #cfcfcf;
+ }
+ }
+ }
+ }
+ }
+ .peopleChoose {
+ width: 100%;
+ min-height: 200rpx;
+ border-radius: 16rpx;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ padding: 36rpx;
+ margin: 10px 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ .title {
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin: 4px 0;
+ }
+ .loveList {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 24rpx;
+ width: 100%;
+ .peopleName {
+ padding: 0 30rpx;
+ height: 60rpx;
+ margin: 0 20rpx 20rpx 0;
+ transition: all 0.3s;
+ background: #f2f2f2;
+ border-radius: 2px;
+ border-radius: 2px;
+ line-height: 60rpx;
+ text-align: center;
+ color: #666666;
+ font-size: 12px;
+ }
+ .active2 {
+ background: rgba(255, 107, 74, 0.15);
+ color: #ff6b4a;
+ }
+ }
+ }
+ .goods-data {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 37rpx 40rpx 0 40rpx;
+ background: #ffffff;
+ border-radius: 12rpx;
+ .opCollapse {
+ width: 100%;
+ padding-bottom: 28rpx;
+ margin-top: 7px;
+ border-bottom: 1px solid #e9e9e9;
+ .head {
+ display: flex;
+ justify-content: space-between;
+ height: 24px;
+ // font-family: PingFangSC-Medium;
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin-bottom: 18rpx;
+ .headRighted {
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-bottom: 4px solid #cfcfcf;
+ transform: scaleY(-1);
+ margin-top: 10px;
+ }
+ .headMid {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-left: -120rpx;
+ }
+ .headRight {
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-bottom: 4px solid #cfcfcf;
+ margin-top: 10px;
+ }
+ }
+ .body {
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: 0;
+ .bodyBox {
+ margin-top: 15px;
+ .names {
+ font-size: 12px;
+ color: #151515;
+ letter-spacing: 0;
+ text-align: justify;
+ line-height: 17px;
+ margin-left: 5px;
+ margin-right: 10px;
+ }
+ text {
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: 0;
+ text-align: justify;
+ }
+ }
+ }
+ .goods-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ width: 100%;
+ padding: 40rpx 0;
+ .p1 {
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin: 4px 0;
+ }
+ .p2 {
+ font-size: 12px;
+ color: #999999;
+ letter-spacing: -0.23px;
+ margin-bottom: 32rpx;
+ }
+ .image2 {
+ width: 42rpx;
+ height: 34rpx;
+ margin-right: 12rpx;
+ }
+ .confirm {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: -0.23px;
+ width: 684rpx;
+ .image1 {
+ margin-right: 25rpx;
+ width: 42rpx;
+ height: 38rpx;
+ }
+ }
+ .picker {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+
+ .picker-choice {
+ display: flex;
+ width: 684rpx;
+ align-items: center;
+ margin-bottom: 40rpx;
+ .input {
+ border-bottom: 1px solid #cfcfcf;
+ height: 40rpx;
+ }
+ .choice-left {
+ width: 210rpx;
+ .pd {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: -0.26px;
+ text-align: justify;
+ line-height: 24px;
+ margin-right: 44rpx;
+ }
+ .p11 {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: -0.26px;
+ text-align: justify;
+ line-height: 24px;
+ // margin-right: 10px;
+ }
+ .p12 {
+ font-size: 10px;
+ color: #3f3f3f;
+ letter-spacing: -0.19px;
+ text-align: justify;
+ line-height: 24px;
+ }
+ }
+ .p13 {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-right: 10px;
+ }
+ .p13-date {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-right: 5px;
+ }
+ picker {
+ width: 144rpx;
+ height: 40rpx;
+ display: flex;
+ position: relative;
+ .p14 {
+ font-size: 14px;
+ color: #666666;
+ letter-spacing: -0.26px;
+ text-align: center;
+ width: 124rpx;
+ border-bottom: 1px solid #cfcfcf;
+ height: 38rpx;
+ }
+ image {
+ width: 20rpx;
+ height: 20rpx;
+ position: absolute;
+ right: 20rpx;
+ top: 8rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .choose {
+ width: 100%;
+ background: #ffffff;
+ border-radius: 12rpx;
+ margin-top: 20rpx;
+ padding: 40rpx 40rpx 112rpx 40rpx;
+ box-sizing: border-box;
+ .chooseItem {
+ width: 100%;
+ padding-bottom: 32rpx;
+ border-bottom: 1px solid #e9e9e9;
+ margin-bottom: 28rpx;
+ }
+ .chooseRes {
+ font-size: 12px;
+ color: #666666;
+ }
+ .itemsWrap {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 24rpx;
+ .item1 {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 32rpx;
+ margin: 0 36rpx 24rpx 0;
+ transition: all 0.3s;
+ border: 1px solid #ffffff;
+ }
+ .item2 {
+ // width: 100rpx;
+ padding: 0 30rpx;
+ height: 60rpx;
+ margin: 0 20rpx 20rpx 0;
+ transition: all 0.3s;
+ background: #f2f2f2;
+ border-radius: 2px;
+ border-radius: 2px;
+ line-height: 60rpx;
+ text-align: center;
+ color: #666666;
+ font-size: 12px;
+ }
+ .active1 {
+ opacity: 0.7;
+ border: 1px solid #ff6b4a;
+ }
+ .active2 {
+ background: rgba(255, 107, 74, 0.15);
+ color: #ff6b4a;
+ }
+ }
+ }
+ .button {
+ position: fixed;
+ z-index: 10;
+ width: 100%;
+ height: 112rpx;
+ background-color: #ff6b4a;
+ font-size: 16px;
+ color: #ffffff;
+ line-height: 112rpx;
+ text-align: center;
+ // position: absolute;
+ bottom: 0;
+ left: 0;
+ }
+}
+/* sheet弹窗 */
+.sheet {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 150%;
+ left: 0upx;
+ bottom: 0upx;
+ right: 0upx;
+ background: rgba(0, 0, 0, 0.3);
+ z-index: 10000;
+}
+
+/* 显示时候的动画默认0.5s */
+.sheetView {
+ width: 100%;
+ height: 0upx;
+ position: absolute;
+ bottom: 0upx;
+ background: white;
+ z-index: 10001;
+ transition: all 0.5s;
+}
+.sheetShow {
+ top: 0upx !important;
+}
+/* 关闭时的动画，时间自己可以设置0.5s*/
+.sheeHide {
+ top: 120% !important;
+ transition: all 0.5s;
+}
+
+/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
+.sheetView_active {
+ height: 942upx;
+}
+
diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue
index 45d2f6c..f57749d 100644
--- a/src/pages/frameDetail/frameDetail.vue
+++ b/src/pages/frameDetail/frameDetail.vue
@@ -291,12 +291,18 @@
class="D5"
v-if="current !==2"
>
-
+
商品详细
-
+
@@ -309,7 +315,7 @@
class="botton_1"
>
-
+
{{cartNumber}}
购物车
@@ -321,27 +327,33 @@
>加入购物车
立即购买
-
-
+
+