html+js+css设计项目的代码.zip

:root{--hd:1px;--primary:#5d9cec;--bubble-color:#dbefff;--success:#52c41a;--warning:#faad14;--danger:#ff4d4f;--info:#68a5ff;--invalid:#bbb;--base-white:#fff;--base-black:#000;--transparent:transparent;--main-fc:#111;--regular-fc:#666;--secondary-fc:#999;--invalid-fc:var(--invalid);--placeholder-fc:#ccc;--link-fc:var(--primary);--storke-color:var(--primary);--border-color:#e5e5e5;--diviling-line-color:#f2f2f2;--box-shadow-color:rgba(0,0,0,0.12);--border-color-active:var(--primary);--m-bg-base:#f7f7f7;--bg-base:#f6f6f6;--bg-weak:#f1f1f1;--bg-tap:#ebeff5;--label-bc:#f5f5f5;--label-bc-active:#e9f7ff;--mask-bc:rgba(0,0,0,0.4);--tip-bc:rgba(0,0,0,0.4);--hover-bc:#ecf5ff;--modal-bc:var(--bg-base);--modal-top-bc:var(--bg-base);--invalid-bc:var(--invalid);--collection-color:#f9c300;--regular-ff:Arial,PingFangSC-Light,Hiragino Sans GB,Microsoft YaHei,sans-serif;--medium-ff:PingFangSC-Medium,Microsoft YaHei,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Arial,sans-serif;--bold-ff:PingFang-SC-Bold,Microsoft YaHei,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Arial,sans-serif;--spacing-sm:calc(var(--hd)*8*1);--spacing-md:calc(var(--hd)*8*2);--spacing-lg:calc(var(--hd)*8*3);--font-size-10:calc(var(--hd)*10);--font-size-12:calc(var(--hd)*12);--font-size-14:calc(var(--hd)*14);--font-size-15:calc(var(--hd)*15);--font-size-16:calc(var(--hd)*16);--font-size-17:calc(var(--hd)*17);--font-size-18:calc(var(--hd)*18);--font-size-sm:var(--font-size-12);--font-size-md:var(--font-size-14);--font-size-lg:var(--font-size-16);--font-size-icontext:var(--font-size-10);--font-size-caption-sm:var(--font-size-12);--font-size-base:var(--font-size-14);--font-size-subhead:var(--font-size-15);--font-size-caption:var(--font-size-16);--font-size-heading:var(--font-size-17);--line-height-base:calc(var(--hd)*40);--line-height-sm:calc(var(--hd)*35);--font-weight-base:400;--font-weight-thin:200;--font-weight-bold:600;--h-spacing-xs:calc(var(--hd)*4);--h-spacing-sm:calc(var(--hd)*6);--h-spacing-md:calc(var(--hd)*8);--h-spacing-lg:calc(var(--hd)*16);--h-spacing-xl:calc(var(--hd)*24);--v-spacing-xs:calc(var(--hd)*4);--v-spacing-sm:calc(var(--hd)*6);--v-spacing-md:calc(var(--hd)*8);--v-spacing-lg:calc(var(--hd)*16);--v-spacing-xl:calc(var(--hd)*24);--border-width:calc(var(--hd)*1);--border-width-lg:calc(var(--hd)*2);--border-solid:var(--border-width) solid var(--border-color);--border-dotted:var(--border-width-lg) dotted var(--border-color);--diviling-line-width:calc(var(--hd)*1);--diviling-line-solid:var(--diviling-line-width) solid var(--diviling-line-color);--border-radius-none:0;--border-radius-xs:calc(var(--hd)*3);--border-radius-sm:calc(var(--hd)*6);--border-radius-md:calc(var(--hd)*8);--border-radius-lg:calc(var(--hd)*15);--box-shadow-x:0;--box-shadow-y:calc(var(--hd)*3);--box-shadow-blur:calc(var(--hd)*12);--box-shadow-spread:calc(var(--hd)*1);--box-shadow:var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-color);--box-shadow-storke:var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-spread) var(--box-shadow-color);--progress-zindex:2000;--popover-zindex:1999;--toast-zindex:1999;--action-sheet-zindex:1000;--picker-zindex:1000;--popup-zindex:999;--dialog-draw-zindex:900;--modal-zindex:999;--tabs-pagination-zindex:999;--dialog-route-layout-zindex:998;--dialog-confirm-zindex:2999;--map-zindex:9;--map-wrap-zindex:10;--map-search-zindex:11;--image-cropper-mask-zIndex:10;--comment-search-zIndex:10;--comment-search-panel-zIndex:11;--transition-du:0.3s;--transition-tf:cubic-bezier(0.645,0.045,0.355,1);--transition-all:all var(--transition-du) var(--transition-tf);--transition-color:color var(--transition-du) var(--transition-tf);--transition-bc:background-color var(--transition-du) var(--transition-tf);--transition-w:width var(--transition-du) var(--transition-tf);--transition-h:height var(--transition-du) var(--transition-tf);--col-1:4.16%;--col-2:8.33%;--col-3:12.5%;--col-4:16.67%;--col-5:20.83%;--col-6:25%;--col-7:29.16%;--col-8:33.33%;--col-9:37.5%;--col-10:41.66%;--col-11:45.83%;--col-12:50%;--col-13:54.16%;--col-14:58.33%;--col-15:62.5%;--col-16:66.66%;--col-17:70.83%;--col-18:75%;--col-19:79.16%;--col-20:83.33%;--col-21:87.5%;--col-22:91.66%;--col-23:95.83%;--col-24:100%;--show-btn-size:calc(var(--hd)*10);--show-btn-width:calc(var(--hd)*14);--show-btn-height:calc(var(--hd)*36);--show-btn-border-radius:calc(var(--hd)*6);--avatar-size-lg:calc(var(--hd)*36);--avatar-size-md:calc(var(--hd)*30);--avatar-size-sm:calc(var(--hd)*24);--avatar-size-xs:calc(var(--hd)*20);--avatar-icon-lg:calc(var(--hd)*28);--avatar-icon-md:calc(var(--hd)*22);--avatar-icon-sm:calc(var(--hd)*18);--avatar-icon-xs:calc(var(--hd)*14);--btn-font-size:var(--font-size-sm);--btn-font-family:var(--regular-ff); --btn-font-color:var(--base-white);--btn-line-height:calc(var(--hd)*16);--btn-padding-y:var(--v-spacing-sm);--btn-padding-x:var(--h-spacing-lg);--btn-border:var(--border-width) solid var(--transparent);--btn-r