初始化商家端

style/animation.css

@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

style/common.scss

@@ -0,0 +1,237 @@
+/**
+ * 公共样式
+ * 补充一些colorUI没有但是设计图常用的样式
+ * 一些兼容性样式等
+ */
+page {
+    background: #F8F8F8;
+    min-height: 100%;
+}
+
+
+[v-cloak] {
+    display: none;
+}
+
+.text-333 {
+    color: #333333;
+}
+
+.text-666 {
+    color: #666666;
+}
+
+.text-999 {
+    color: #999999;
+}
+
+.text-bf {
+    color: #BFBFBF;
+}
+
+.text-through {
+    text-decoration: line-through;
+}
+
+.text-weight-400 {
+    font-weight: 400;
+}
+
+.text-weight-500 {
+    font-weight: 500;
+}
+
+.text-weight-600 {
+    font-weight: 600;
+}
+
+.text-weight-700 {
+    font-weight: 700;
+}
+
+.text-cut-2,
+.text-cut-3,
+.text-cut-4,
+.text-cut-5 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.text-cut-2 {
+    -webkit-line-clamp: 2;
+}
+
+.text-cut-3 {
+    -webkit-line-clamp: 3;
+}
+
+.text-cut-4 {
+    -webkit-line-clamp: 4;
+}
+
+.text-cut-5 {
+    -webkit-line-clamp: 5;
+}
+
+.height-88 {
+    height: 88rpx;
+}
+
+.height-100 {
+    height: 100rpx;
+}
+
+.safeArea-bottom {
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.bg-theme {
+    background: $bgtheme;
+}
+
+.text-theme,
+.line-theme,
+.lines-theme {
+    color: $theme!important;
+}
+
+.line-theme::after,
+.lines-theme::after {
+    border-color: $theme!important;
+}
+
+.overHidden {
+    overflow: hidden;
+}
+
+.word-break-all {
+    word-break: break-all;
+}
+
+.placeholderClass {
+    font-size: 32rpx;
+    color: #BFBFBF;
+}
+
+.checkboxScale {
+    transform: scale(0.65);
+}
+
+switch.theme[checked] .wx-switch-input,
+checkbox.theme[checked] .wx-checkbox-input,
+radio.theme[checked] .wx-radio-input,
+switch.theme.checked .uni-switch-input,
+checkbox.theme.checked .uni-checkbox-input,
+radio.theme.checked .uni-radio-input {
+    background: $theme!important;
+    border-color: $theme!important;
+    color: #ffffff!important;
+}
+
+uni-switch.green[checked] .wx-switch-input,
+uni-checkbox.green[checked] .wx-checkbox-input,
+uni-checkbox[checked] .wx-checkbox-input,
+uni-radio.green[checked] .wx-radio-input,
+uni-switch.green.checked .uni-switch-input,
+uni-switch.checked .uni-switch-input,
+uni-checkbox.green.checked .uni-checkbox-input,
+uni-checkbox.checked .uni-checkbox-input,
+uni-radio.green.checked .uni-radio-input,
+uni-radio.checked .uni-radio-input {
+    background-color: $theme !important;
+    color: #ffffff !important;
+    border-color: $theme !important;
+}
+
+uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
+    border-color: $theme !important;
+}
+switch.red[checked] .wx-switch-input.wx-switch-input-checked,
+checkbox.red[checked] .wx-checkbox-input,
+radio.red[checked] .wx-radio-input,
+switch.red.checked .uni-switch-input.uni-switch-input-checked,
+checkbox.red.checked .uni-checkbox-input,
+radio.red.checked .uni-radio-input {
+  background-color: $theme !important;
+  border-color: $theme !important;
+  color: #ffffff !important;
+}
+switch.olive[checked] .wx-switch-input,
+checkbox.olive[checked] .wx-checkbox-input,
+radio.olive[checked] .wx-radio-input,
+switch.olive.checked .uni-switch-input,
+checkbox.olive.checked .uni-checkbox-input,
+radio.olive.checked .uni-radio-input {
+  background-color: $theme !important;
+  border-color: $theme !important;
+  color: #ffffff !important;
+}
+
+switch.green[checked] .wx-switch-input,
+/* switch[checked] .wx-switch-input, */
+checkbox.green[checked] .wx-checkbox-input,
+checkbox[checked] .wx-checkbox-input,
+radio.green[checked] .wx-radio-input,
+/* radio[checked] .wx-radio-input, */
+switch.green.checked .uni-switch-input,
+switch.checked .uni-switch-input,
+checkbox.green.checked .uni-checkbox-input,
+checkbox.checked .uni-checkbox-input,
+radio.green.checked .uni-radio-input,
+radio.checked .uni-radio-input {
+  background-color: $theme !important;
+  border-color: $theme !important;
+  color: #ffffff !important;
+  border-color: $theme !important;
+}
+// w-picker 加圆角
+.w-picker .w-picker-cnt.visible {
+    border-radius: 16rpx 16rpx 0px 0px !important;
+    overflow: hidden!important;
+}
+
+// w-picker 标题栏高度
+.w-picker .w-picker-header {
+    height: 100rpx!important;
+}
+
+// w-picker 去掉山下边框线
+.uni-picker-view-indicator::before {
+    border-top: 1px solid transparent;
+}
+
+.uni-picker-view-indicator:after {
+    border-bottom: 1px solid transparent;
+}
+uni-modal .uni-modal__bd{
+    color: #333!important;
+  }
+
+.star{	//星星
+	position: relative;
+	display: flex;
+	align-items: center;
+	&::before{
+		content: '*';
+		position: absolute;
+		left: -10px;
+		top: 0.3em;
+		color: #F65151;
+		font-size: 32rpx;
+		margin-right: 10rpx;
+		vertical-align: sub;
+		height: 14rpx;
+	}
+}
+.form-scale{
+	transform: scale(0.7);
+}
+.form-hidden{
+    display: none;
+}
+
+ 

style/diyStyle.scss

@@ -0,0 +1,507 @@
+.benben-scroll-x {
+  display: inline-block;
+  min-width: 100%;
+}
+.fu-form {
+  display: block;
+  overflow-x: hidden;
+  .warning {
+    font-size: 22rpx;
+    color: red;
+  }
+
+  // 复选框 - 单选框
+  .fu-checkbox {
+    .titleOne {
+      flex-wrap: wrap;
+      .form-title {
+        width: 100% !important;
+        margin-bottom: 10rpx;
+      }
+    }
+    // 模式样式
+    .model_3 {
+      flex-wrap: wrap;
+      .form-title {
+        display: inline-block;
+        width: 100% !important;
+        margin-bottom: 10rpx;
+      }
+      .radioItem {
+        width: 100%;
+        flex-direction: row-reverse;
+        padding: 10rpx 0;
+        margin-right: 0;
+      }
+    }
+    .title_img {
+      width: 56rpx;
+      height: 56rpx;
+      position: relative;
+      margin-right: 24rpx;
+
+      image {
+        width: 56rpx;
+        height: 56rpx;
+        border-radius: 100rpx;
+      }
+    }
+    .radioBtns {
+      position: relative;
+      .btn_radio {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+      }
+    }
+    .cu-btn[class*="line"]::after {
+      border-radius: inherit;
+    }
+  }
+  .any-fu-select ::v-deep {
+    uni-switch.green[checked] .wx-switch-input,
+    uni-checkbox.green[checked] .wx-checkbox-input,
+    uni-checkbox[checked] .wx-checkbox-input,
+    uni-radio.green[checked] .wx-radio-input,
+    uni-switch.green.checked .uni-switch-input,
+    uni-switch.checked .uni-switch-input,
+    uni-checkbox.green.checked .uni-checkbox-input,
+    uni-checkbox.checked .uni-checkbox-input,
+    uni-radio.green.checked .uni-radio-input,
+    uni-radio.checked .uni-radio-input {
+      background-color: inherit !important;
+      color: inherit !important;
+      border-color: inherit !important;
+      border-radius: 3px;
+    }
+    uni-checkbox .uni-checkbox-input {
+      border-radius: 0;
+    }
+    uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
+      border-color: #d1d1d1 !important;
+    }
+  }
+
+  // 按钮
+  .fu-form-button {
+    display: inline-block;
+    font-size: 0;
+
+    &.fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      display: block;
+    }
+
+    button {
+      font-size: 14px;
+    }
+  }
+
+  // 输入框
+  .fu-form-input {
+    .form-title {
+      margin-right: 10px;
+    }
+
+    input {
+      padding: 10rpx 20rpx 10rpx 0;
+    }
+
+    .model_1 {
+      align-items: center;
+    }
+
+    .model_2 {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .text-box {
+        width: 100%;
+        margin-top: 5px;
+      }
+    }
+
+    .model_3 {
+      border-radius: 100px;
+      background-color: #FFFFFF;
+      border: 1px solid #CCCCCC;
+
+      &::after {
+        content: none;
+      }
+    }
+
+  }
+
+  // 分割线
+  .fu-line {
+    width: 100%;
+    border-bottom: 1rpx solid #ebeef5;
+    margin: 10px 0;
+  }
+
+  // 文字
+  .bulletin-text {
+    display: inline-block;
+  }
+
+  // 多行文本输入框
+  .myTextarea {
+    position: relative;
+
+    .textarea-count {
+      position: absolute;
+      right: 20rpx;
+      bottom: 20rpx;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+
+  // 上传
+  .add-img {
+    width: 160rpx;
+    height: 160rpx;
+  }
+
+  // 图标
+  .fu-iconfont {
+    display: inline;
+    line-height: 1.5;
+  }
+
+  // 选择框
+  .fu-picker {
+    &::before {
+      z-index: -1;
+    }
+  }
+
+  .dir-img {
+    padding-left: 68rpx;
+
+    .opeion-img {
+      max-width: 100%;
+    }
+  }
+
+  // 答题多项填空
+  .fu-qs-gapFilling {
+    .gapFiling-input-box {
+      display: inline-block;
+      position: relative;
+      min-width: 100rpx;
+      min-height: 1em;
+      font-size: 28rpx;
+      border: 1rpx solid #dcdfe6;
+    }
+
+    .gapFiling-input {
+      border: 1rpx solid red;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      font-size: 1em;
+      padding: 0;
+      margin: 0;
+      // display: none;
+      opacity: 0;
+    }
+  }
+
+  // 答题-输入框
+  .qs-textarea {
+    border: 1px solid #dcdfe6;
+    border-radius: 8rpx;
+  }
+
+}
+
+//form end
+.fu-free-components {
+  position: relative;
+  overflow: hidden;
+  box-sizing: content-box;
+}
+
+.fu-free-element {
+  position: absolute;
+}
+
+.fu-free-linex-diy {
+  transform-origin: 0 0;
+  transform: scaleY(0.5);
+}
+
+.fu-free-liney-diy {
+  transform-origin: 0 0;
+  transform: scaleX(0.5);
+}
+
+.fu-free-container-diy {
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+
+.fu-block-54 {
+  width: 54rpx;
+  height: 54rpx;
+}
+
+button {
+  padding: 0;
+}
+
+button:after {
+  content: none;
+}
+
+.text-cut-num {
+  display: -webkit-box;
+  /**对象作为伸缩盒子模型展示**/
+  -webkit-box-orient: vertical;
+  /**设置或检索伸缩盒子对象的子元素的排列方式**/
+  overflow: hidden;
+  /**隐藏超出的内容**/
+}
+
+.fu-score-star {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fu-progress-bar {
+  overflow: hidden;
+
+  .fu-progress-bar-border {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 200%;
+    height: 200%;
+    transform-origin: 0 0;
+    transform: scale(0.5);
+    z-index: 10;
+  }
+
+  .fu-progress-bar-center {
+    position: absolute;
+    left: 0;
+    height: 100%;
+  }
+}
+
+.goods-swiper-item {
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.goods-swiper-box {
+  position: relative;
+
+  .indicator-position-right {
+    position: absolute;
+    right: 10rpx;
+    bottom: 20rpx;
+  }
+
+  .indicator-position-left {
+    position: absolute;
+    left: 10rpx;
+    bottom: 20rpx;
+  }
+
+  .indicator-position-center {
+    position: absolute;
+    left: 50%;
+    bottom: 20rpx;
+    transform: translateX(-50%);
+  }
+
+  .goods-swiper-indicator-spot {
+    display: flex;
+
+    view {
+      background-color: #929292;
+      margin: 0 5rpx;
+      width: 10rpx;
+      height: 10rpx;
+    }
+
+    .goods-swiper-indicator-spot-active {
+      background-color: #ff5536;
+    }
+  }
+
+  .goods-swiper-indicator-num {
+    padding: 5rpx 20rpx;
+  }
+}
+
+.benben-bg-size {
+  background-size: 100% auto !important;
+}
+
+.benben-box-size {
+  box-sizing: content-box;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.benben-progress-bar {
+  position: relative;
+}
+
+.benben-progress-bar-center {
+  position: absolute;
+  left: 0;
+  height: 100%;
+}
+
+.benben-progress-bar-image {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.benben-position-layout {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+.benben-flex-layout {
+  display: flex;
+}
+
+.image_upload_tips {
+  width: 100%;
+}
+
+.benben-flex-tabs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .benben-tabs {
+    height: 100%;
+    &-content {
+      height: 100%;
+      min-width: 100%;
+      display: inline-block;
+      position: relative;
+    }
+    &-title {
+      height: 100%;
+      position: relative;
+      z-index: 1;
+    }
+    &-line {
+      position: absolute;
+      transform: translateX(-50%);
+      z-index: 0;
+      transition: all 0.3s ease;
+    }
+  }
+}
+
+.benben-table-content {
+  display: inline-block;
+}
+
+.benben-flex-table-y {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid;
+  border-color: transparent;
+
+  .benben-flex-table-head {
+    position: sticky;
+    left: 0;
+  }
+
+  .benben-flex-table-row,
+  .benben-flex-table-head {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-right: 1px solid;
+    border-color: inherit;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    .benben-flex-table-cell {
+      display: flex;
+      border-bottom: 1px solid;
+      border-color: inherit;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.benben-flex-table-x {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  border: 1px solid;
+  border-color: transparent;
+
+  .benben-flex-table-head {
+    position: sticky;
+    top: 0;
+  }
+
+  .benben-flex-table-row,
+  .benben-flex-table-head {
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+    border-bottom: 1px solid;
+    border-color: inherit;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .benben-flex-table-cell {
+      display: flex;
+      border-right: 1px solid;
+      border-color: inherit;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}