|
|
@@ -11,16 +11,24 @@ $danger-color: #e63946; // 危险色（价格、警告等）
|
|
|
|
|
|
// 2. 全局重置样式（统一浏览器默认样式）
|
|
|
* {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+H1,
|
|
|
+H2,
|
|
|
+H3,
|
|
|
+H4,
|
|
|
+H5,
|
|
|
+H6,
|
|
|
+P {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
|
|
|
-body {
|
|
|
+body ,htm{
|
|
|
font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
|
color: $text-color;
|
|
|
- background-color: #ffffff;
|
|
|
+ background-color: #f5f5f5;
|
|
|
line-height: 1.6;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
// 3. 公共样式类（全局可复用）
|
|
|
@@ -46,8 +54,14 @@ body {
|
|
|
|
|
|
// 4. 全局组件样式覆盖（可选，如需调整 Element Plus 组件默认样式）
|
|
|
// 例如：调整按钮圆角
|
|
|
-.el-button {
|
|
|
- border-radius: 4px;
|
|
|
+// .el-button {
|
|
|
+// border-radius: 4px;
|
|
|
+// }
|
|
|
+.container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
// 调整折叠面板样式
|
|
|
@@ -59,13 +73,540 @@ body {
|
|
|
// 小屏幕（手机）
|
|
|
@media (max-width: 768px) {
|
|
|
.container {
|
|
|
- padding: 0 10px;
|
|
|
+ // padding: 0 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 中屏幕（平板）
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
|
.container {
|
|
|
- padding: 0 15px;
|
|
|
+ // padding: 0 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@charset "UTF-8";
|
|
|
+wx-image{
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.padding12 {
|
|
|
+ padding: 12px
|
|
|
+}
|
|
|
+.padding20 {
|
|
|
+ padding: 20px
|
|
|
+}
|
|
|
+.paddingTB20 {
|
|
|
+ padding: 20px 0
|
|
|
+}
|
|
|
+.paddingTB30 {
|
|
|
+ padding: 30px 0
|
|
|
+}
|
|
|
+.paddingTB10 {
|
|
|
+ padding: 10px 0
|
|
|
+}
|
|
|
+
|
|
|
+.pad20 {
|
|
|
+ padding: 0 20px
|
|
|
+}
|
|
|
+
|
|
|
+.padding15 {
|
|
|
+ padding: 15px
|
|
|
+}
|
|
|
+.padding30 {
|
|
|
+ padding: 30px
|
|
|
+}
|
|
|
+
|
|
|
+.pad30 {
|
|
|
+ padding: 0 30px
|
|
|
+}
|
|
|
+.pt20 {
|
|
|
+ padding-top: 20px
|
|
|
+}
|
|
|
+.pb15 {
|
|
|
+ padding-bottom: 15px
|
|
|
+}
|
|
|
+.pb20 {
|
|
|
+ padding-bottom: 20px
|
|
|
+}
|
|
|
+.pb30 {
|
|
|
+ padding-bottom: 30px
|
|
|
+}
|
|
|
+
|
|
|
+.mb30 {
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.mr20 {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.mr30 {
|
|
|
+ margin-right: 30px;
|
|
|
+}
|
|
|
+.mr10 {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.ml10 {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ml20 {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.mt20 {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.mt30 {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+.mt16 {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+.mt10 {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.mt5 {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.mb20 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.ellipsis {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap
|
|
|
+}
|
|
|
+
|
|
|
+.line1 {
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ /* height: 84px; */
|
|
|
+}
|
|
|
+.line2 {
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ /* height: 84px; */
|
|
|
+}
|
|
|
+
|
|
|
+.mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #000;
|
|
|
+ opacity: .5;
|
|
|
+ z-index: 5
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes load {
|
|
|
+ from {
|
|
|
+ transform: rotate(0)
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes load {
|
|
|
+ from {
|
|
|
+ transform: rotate(0)
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.loadingpic {
|
|
|
+ animation: load 3s linear 1s infinite;
|
|
|
+ --webkit-animation: load 3s linear 1s infinite
|
|
|
+}
|
|
|
+
|
|
|
+.loading-list {
|
|
|
+ animation: load linear 1s infinite;
|
|
|
+ -webkit-animation: load linear 1s infinite;
|
|
|
+ font-size: 40px;
|
|
|
+ margin-right: 22px
|
|
|
+}
|
|
|
+
|
|
|
+.loading {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+
|
|
|
+.loading .line {
|
|
|
+ position: absolute;
|
|
|
+ width: 450px;
|
|
|
+ left: 150px;
|
|
|
+ top: 50px;
|
|
|
+ height: 1px;
|
|
|
+ border-top: 1px solid #eee
|
|
|
+}
|
|
|
+
|
|
|
+.loading .text {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 20px;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 2;
|
|
|
+ color: #777
|
|
|
+}
|
|
|
+
|
|
|
+.loadingicon .loading {
|
|
|
+ animation: load linear 1s infinite;
|
|
|
+ font-size: 45px;
|
|
|
+ color: #000
|
|
|
+}
|
|
|
+
|
|
|
+.loadingicon {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden
|
|
|
+}
|
|
|
+.bg-color-huic{
|
|
|
+ background: #F1F1F1!important;
|
|
|
+ border: 1px solid #ccc!important;
|
|
|
+ color: #ccc!important;
|
|
|
+}
|
|
|
+.nowrap{
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.gap10{
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+/*flex样式*/
|
|
|
+.flex_1{
|
|
|
+ flex:1;
|
|
|
+}
|
|
|
+.flex{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.flex_2{
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+.flex-between{/*两边对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.flex-align-center{/*垂直居中*/
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center{/*水平垂直居中*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-flex-end{/*水平垂直居中-尾部对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-box-end{/*水平垂直居中-铺满盒内*/
|
|
|
+ display: -webkit-inline-box;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-flex-start{/*水平垂直居中-首部对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-around{/*水平垂直居中-平均对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-between{/*水平垂直居中-两边对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-column{/*竖直方向*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.flex-column-center{/*竖直方向水平居中 两端对齐*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-column-start{/*竖直方向水平居中 首部对齐*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: self-start;
|
|
|
+}
|
|
|
+.flex-column-start-between{/*竖直方向-首部对齐-两端对齐*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: self-start;
|
|
|
+}
|
|
|
+.flex-column-align{/*竖直方向水平居中*/
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.flex-center-flex-start-warp{/*水平垂直居中-首部对齐*/
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap:wrap ;
|
|
|
+}
|
|
|
+.order_btn{
|
|
|
+ font-size: 25px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius:10px;
|
|
|
+ background-color: primary-color;
|
|
|
+ &.error{
|
|
|
+ background-color: #E93323;
|
|
|
+ }
|
|
|
+ &.plain{
|
|
|
+ border:1px solid #cccccc;
|
|
|
+ color: #000000;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.border{
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+}
|
|
|
+.border-bottom{
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+}
|
|
|
+.gray{
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.link{
|
|
|
+ color: #007aff;
|
|
|
+}
|
|
|
+.bg_color_f5{
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+.edit_gary {
|
|
|
+ background: #EBEBEB;
|
|
|
+}
|
|
|
+.bg_color_fff{
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.bg_color_primary{
|
|
|
+ background-color: primary-color;
|
|
|
+}
|
|
|
+.bg_gradient_primary{
|
|
|
+ background: linear-gradient(180deg, #0089FF 0%, #F5F7FA 50%);
|
|
|
+ background-size: 200% 100vh;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.bg_gradient_primary_toright{
|
|
|
+ //从左到右渐变色
|
|
|
+ background: linear-gradient(to right, rgba(73, 171, 255, 1), rgba(0, 137, 255, 1));
|
|
|
+}
|
|
|
+.border_radius_10{
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.border_radius_20{
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+.border_radius_30{
|
|
|
+ border-radius: 30px;
|
|
|
+}
|
|
|
+.bold{
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.font_size40{
|
|
|
+ font-size: 40px;
|
|
|
+}
|
|
|
+.font_size36{
|
|
|
+ font-size: 36px;
|
|
|
+}
|
|
|
+.font_size35{
|
|
|
+ font-size: 35px;
|
|
|
+}
|
|
|
+.font_size32{
|
|
|
+ font-size: 32px;
|
|
|
+}
|
|
|
+.font_size30{
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.font_size28{
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+.font_size20{
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.font_size25{
|
|
|
+ font-size: 25px;
|
|
|
+}
|
|
|
+.font_size24{
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.line_vertical{
|
|
|
+ width: 8px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: primary-color;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.color_price{
|
|
|
+ color: #fc4f1d;
|
|
|
+}
|
|
|
+.color_vip{
|
|
|
+ color: #fee189;
|
|
|
+}
|
|
|
+.color_fff{
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.color_000{
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.color_theme{
|
|
|
+ color: primary-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_align_center{
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.text_align_right{
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.foot{
|
|
|
+ padding: 20px 30px;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+.box_shadow{
|
|
|
+ box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+.ellipsis{
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.bg_img{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.line_through{
|
|
|
+ text-decoration: line-through;
|
|
|
+}
|
|
|
+
|
|
|
+.required{
|
|
|
+ color: #E93323;
|
|
|
+}
|
|
|
+.u_popup_bottom{
|
|
|
+ border-radius: 30px 30px 0 0;
|
|
|
+}
|
|
|
+.overflow_hidden{
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.payment-radio {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .radio-circle {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 3px solid #ddd;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ border-color: primary-color;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: primary-color;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.noData{
|
|
|
+ text-align: center;
|
|
|
+ padding: 30px 0;
|
|
|
+ color: #c8c7cc;
|
|
|
+}
|
|
|
+.serviceLabel{
|
|
|
+ background-color: #ffe8e6;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #E93323;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ display: inline-block;
|
|
|
+ // margin-top: 20px;
|
|
|
+ &:not(:last-child){
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.status_bar {
|
|
|
+ height: var(--height);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .hover-view {
|
|
|
+ opacity: 0.7;
|
|
|
}
|
|
|
+ .p_certification {
|
|
|
+ width: 124px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #E9EFFF;
|
|
|
+ border-radius: 20px;
|
|
|
+ image {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ view {
|
|
|
+ color: #0089FF;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .truncate {
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 禁止换行 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 隐藏溢出内容 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 显示省略号 */
|
|
|
+ }
|
|
|
+.tabbar_height{
|
|
|
+ height: calc(120px + constant(safe-area-inset-bottom));
|
|
|
+ height: calc(120px + env(safe-area-inset-bottom));
|
|
|
+}
|
|
|
+.zp-empty-view,.zp-l-container{
|
|
|
+ background-color: #F5F7FA;
|
|
|
+}
|
|
|
+.close_img{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
}
|
zhangningning