index.css 5.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. page{background-color: #fff;}
  2. .con-top image{width: 100%;}
  3. .price-list{padding: 0 60rpx 130rpx;}
  4. .price-list .li{margin-top: 40rpx;background: linear-gradient(90deg,#fe3a00,#fdb103);padding: 3rpx;border-radius: 5rpx;position: relative;height: 103rpx;}
  5. .li-bg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
  6. .price-list .li-c{background: #fff;border-radius: 5rpx;padding: 0 53rpx 0 32rpx;position: relative;z-index: 3;height: 103rpx;}
  7. .price-tag{width: 67rpx;height: 67rpx;position: absolute;top: 0;left: 0;z-index: 4;}
  8. .gou{width: 33rpx;height: 33rpx;}
  9. .price{font-size: 60rpx;color: #fd7a02;font-weight: bold;margin-left: 30rpx;}
  10. .price-fh{font-size: 24rpx;position: relative;top: -15rpx;}
  11. .price-dw{font-size: 22rpx;position: relative;bottom: -13rpx;margin-left: 10rpx;}
  12. .price-txt{font-size: 30rpx;color: #fff;font-weight: bold;}
  13. .price-txt text{display: block;font-size: 22rpx;opacity: .8;margin-top: 5rpx;}
  14. .bot{position: fixed;left: 0;right: 0;bottom: 0;z-index: 50;}
  15. .supp{height: 60rpx;background: #f5f5f5;font-size: 20rpx;color: #a4a4a4;text-align: center;line-height: 60rpx;}
  16. .btn{height: 100rpx;background: var(--mina);font-size: 36rpx;color: #fff;font-weight: bold;text-align: center;line-height: 100rpx;}
  17. /* 轮播图 */
  18. .ban{height: 400rpx;position: relative;background: #fff;}
  19. .swiper{width: 100%;height: 400rpx;}
  20. .swiper image{width: 100%;height: 100%;}
  21. .swiper-img{width: 750rpx;height: 400rpx;}
  22. .dots{position: absolute;left: 50%;transform: translateX(-50%);bottom: 30rpx;z-index: 3;justify-content: center;}
  23. .dot{width: 12rpx;height: 12rpx;background: rgba(255,255,255,.4);margin: 0 3rpx;border-radius: 6rpx;}
  24. .dot.active{background: #fff;width: 28rpx;}
  25. /* 表单 */
  26. .form{padding: 40rpx 30rpx;background: #fff;}
  27. .form-title{font-size: 38rpx;color: #000;font-weight: bold;text-align: center;}
  28. .form-list{margin-top: 40rpx;}
  29. .form-list .li{margin-bottom: 30rpx;border-bottom: 1rpx solid #D1D1D1;}
  30. .label{font-size: 28rpx;color: #666;}
  31. .ipt{font-size: 28rpx;color: #333;padding: 25rpx 0;}
  32. .textarea{font-size: 28rpx;color: #333;padding: 25rpx 0;height: 140rpx;width: 100%;box-sizing: border-box;}
  33. .phone-ipt{font-size: 28rpx;color: #333;text-align: left;padding: 25rpx 0 !important;}
  34. .placeholder{color: #ccc;}
  35. .form-btn{margin-top: 60rpx;background: var(--mina);font-size: 30rpx;color: #fff;text-align: center;line-height: 90rpx;border-radius: 10rpx;}
  36. /* 文本 */
  37. .richText{background: #fff;padding: 40rpx 30rpx;font-size: 34rpx;color: #333;line-height: 1.7;margin: 20rpx 0;}
  38. /* 商品 */
  39. .product{margin: 20rpx 0;padding: 0 30rpx;background: #fff;}
  40. .product .li{border-bottom: 1rpx solid #e9e9e9;padding: 30rpx 0;align-items: flex-start;}
  41. .product .li:last-child{border-bottom: none;}
  42. .pro-img{width: 200rpx;height: 200rpx;border-radius: 15rpx;margin-right: 20rpx;}
  43. .pro-info{height: 200rpx;position: relative;}
  44. .pro-name{font-size: 30rpx;color: #333;line-height: 40rpx;height: 85rpx;overflow: hidden;}
  45. .pro-bri{font-size: 24rpx;color: #999;}
  46. .pro-opt{justify-content: space-between;position: absolute;left: 0;right: 0;bottom: 0;}
  47. .money{font-size: 36rpx;color: #C5020B;font-weight: bold;}
  48. .money text{font-size: 22rpx;color: #252A3B;margin-left: 5rpx;font-weight: normal;}
  49. .pro-btn{background: var(--mina);height: 50rpx;border-radius: 25rpx;padding: 0 20rpx;font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;}
  50. .product2{margin: 20rpx 0;padding: 30rpx;}
  51. .product2 .li{width: 330rpx;margin-right: 30rpx;background: #fff;border-radius: 15rpx;}
  52. .product2 .li:nth-child(2n){margin-right: 0;}
  53. .product2 .pro-img{width: 330rpx;height: 330rpx;border-radius: 15rpx 15rpx 0 0;}
  54. .product2 .li .pro-info{padding: 20rpx;height: auto;}
  55. .product2 .li .pro-opt{position: inherit;margin-top: 10rpx;}
  56. .pro-cart image{width: 42rpx;height: 42rpx;}
  57. .product3{margin: 20rpx 0;padding: 20rpx 0;background: none;height: 260rpx;overflow: hidden;}
  58. .product3 scroll-view{white-space: nowrap;padding-bottom: 20rpx;}
  59. .product3 .li{width: 600rpx;margin-right: 30rpx;border: none;display: inline-block;padding: 30rpx;background: #fff;border-radius: 20rpx;}
  60. .product3 .li:first-child{margin-left: 30rpx;}
  61. /* 图片 */
  62. .images image{width: 100%;}
  63. .item6{background: linear-gradient(180deg, #FFFFFF, #FFFFFF, #F9FCFF, #FFFFFF);box-shadow: 0 0 51rpx 0 rgba(152,137,136,0.2);border-radius: 30rpx;margin: 30rpx 40rpx 50rpx;}
  64. .item6-top{position: relative;}
  65. .bg3{width: 100%;height: 116rpx;}
  66. .item6-top-c{position: absolute;top: 0;left: 0;right: 0;z-index: 5;padding: 0 40rpx;font-size: 30rpx;color: #FEFEFE;font-weight: bold;height: 116rpx;flex-direction: column;justify-content: center;align-items: flex-start;line-height: 1;}
  67. .item6-top-c text{display: block;font-size: 24rpx;font-weight: normal;margin-top: 12rpx;}
  68. .item6-con{padding: 0 44rpx;}
  69. .item6-con-t{padding: 50rpx 30rpx 40rpx;text-align: center;}
  70. .kf-img{width: 150rpx;height: 150rpx;border-radius: 50%;margin: 0 auto;}
  71. .name{font-size: 36rpx;color: #000;margin-top: 20rpx;font-weight: bold;}
  72. .mobile{font-size: 30rpx;color: #000;margin-top: 10rpx;}
  73. .tag{width: 268rpx;height: 52rpx;border: 2rpx solid #06B252;border-radius: 28rpx;font-size: 24rpx;color: #06B252;line-height: 52rpx;margin: 0 auto;margin-top: 25rpx;}
  74. .shop{font-size: 24rpx;color: #999;margin-top: 10rpx;}
  75. .tags{justify-content: center;margin-top: 25rpx;}
  76. .tags text{height: 46rpx;background: #F5F5F5;border-radius: 5rpx;font-size: 24rpx;color: #999;padding: 0 14rpx;line-height: 45rpx;margin: 0 18rpx 18rpx 0;}
  77. .tips{font-size: 24rpx;color: #333;line-height: 36rpx;margin-top: 45rpx;}
  78. .qrcode{padding: 35rpx 0 50rpx;border-top: 1rpx dashed #DEDEDE;font-size: 24rpx;color: #999;text-align: center;}
  79. .qrcode image{width: 356rpx;height: 354rpx;margin: 0 auto 20rpx;}