@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-card/props.js

@@ -0,0 +1,134 @@
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+
+export const propsCard = defineMixin({
+  props: {
+    // 与屏幕两侧是否留空隙
+    full: {
+      type: Boolean,
+      default: () => defProps.card.full
+    },
+    // 标题
+    title: {
+      type: String,
+      default: () => defProps.card.title
+    },
+    // 标题颜色
+    titleColor: {
+      type: String,
+      default: () => defProps.card.titleColor
+    },
+    // 标题字体大小
+    titleSize: {
+      type: [Number, String],
+      default: () => defProps.card.titleSize
+    },
+    // 副标题
+    subTitle: {
+      type: String,
+      default: () => defProps.card.subTitle
+    },
+    // 副标题颜色
+    subTitleColor: {
+      type: String,
+      default: () => defProps.card.subTitleColor
+    },
+    // 副标题字体大小
+    subTitleSize: {
+      type: [Number, String],
+      default: () => defProps.card.subTitleSize
+    },
+    // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+    border: {
+      type: Boolean,
+      default: () => defProps.card.border
+    },
+    // 用于标识点击了第几个
+    index: {
+      type: [Number, String, Object],
+      default: () => defProps.card.index
+    },
+    // 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px"
+    margin: {
+      type: String,
+      default: () => defProps.card.margin
+    },
+    // card卡片的圆角
+    borderRadius: {
+      type: [Number, String],
+      default: () => defProps.card.borderRadius
+    },
+    // 头部自定义样式，对象形式
+    headStyle: {
+      type: Object,
+      default: () => defProps.card.headStyle
+    },
+    // 主体自定义样式，对象形式
+    bodyStyle: {
+      type: Object,
+      default: () => defProps.card.bodyStyle
+    },
+    // 底部自定义样式，对象形式
+    footStyle: {
+      type: Object,
+      default: () => defProps.card.footStyle
+    },
+    // 头部是否下边框
+    headBorderBottom: {
+      type: Boolean,
+      default: () => defProps.card.headBorderBottom
+    },
+    // 底部是否有上边框
+    footBorderTop: {
+      type: Boolean,
+      default: () => defProps.card.footBorderTop
+    },
+    // 标题左边的缩略图
+    thumb: {
+      type: String,
+      default: () => defProps.card.thumb
+    },
+    // 缩略图宽高
+    thumbWidth: {
+      type: [String, Number],
+      default: () => defProps.card.thumbWidth
+    },
+    // 缩略图是否为圆形
+    thumbCircle: {
+      type: Boolean,
+      default: () => defProps.card.thumbCircle
+    },
+    // 给head，body，foot的内边距
+    padding: {
+      type: [String, Number],
+      default: () => defProps.card.padding
+    },
+    paddingHead: {
+      type: [String, Number],
+      default: () => defProps.card.paddingHead
+    },
+    paddingBody: {
+      type: [String, Number],
+      default: () => defProps.card.paddingBody
+    },
+    paddingFoot: {
+      type: [String, Number],
+      default: () => defProps.card.paddingFoot
+    },
+    // 是否显示头部
+    showHead: {
+      type: Boolean,
+      default: () => defProps.card.showHead
+    },
+    // 是否显示尾部
+    showFoot: {
+      type: Boolean,
+      default: () => defProps.card.showFoot
+    },
+    // 卡片外围阴影，字符串形式
+    boxShadow: {
+      type: String,
+      default: () => defProps.card.boxShadow
+    }
+  }
+});

package/uview-plus/components/u-card/style.css

@@ -0,0 +1,60 @@
+/* #ifndef APP-NVUE */
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+.u-card-full {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  width: 100%;
+}
+.u-card--border:after {
+  border-radius: 16rpx;
+}
+.u-card__head--left {
+  color: var(--u-main-color);
+}
+.u-card__head--left__thumb {
+  margin-right: 16rpx;
+}
+.u-card__head--left__title {
+  max-width: 400rpx;
+}
+.u-card__head--right {
+  color: var(--u-tips-color);
+  margin-left: 6rpx;
+}
+.u-card__body {
+  color: var(--u-content-color);
+}
+.u-card__foot {
+  color: var(--u-tips-color);
+}

package/uview-plus/components/u-card/style.scss

@@ -0,0 +1,47 @@
+@import '../../libs/css/components.scss';
+
+.u-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  &-full {
+    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100%;
+  }
+
+  &--border:after {
+    border-radius: 16rpx;
+  }
+
+  &__head {
+    &--left {
+      color: $u-main-color;
+
+      &__thumb {
+        margin-right: 16rpx;
+      }
+
+      &__title {
+        max-width: 400rpx;
+      }
+    }
+
+    &--right {
+      color: $u-tips-color;
+      margin-left: 6rpx;
+    }
+  }
+
+  &__body {
+    color: $u-content-color;
+  }
+
+  &__foot {
+    color: $u-tips-color;
+  }
+}

package/uview-plus/components/u-card/u-card.vue

@@ -0,0 +1,3 @@
+<template>
  <view
    class="u-card"
    @tap.stop="click"
    :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
    :style="{
      borderRadius: addUnit(borderRadius),
      margin: margin,
      boxShadow: boxShadow
    }"
  >
    <view
      v-if="showHead"
      class="u-card__head"
      :style="[{ padding: addUnit(paddingHead || padding) }, headStyle]"
      :class="{
        'u-border-bottom': headBorderBottom
      }"
      @tap="headClick"
    >
      <view v-if="!$slots.head" class="u-flex u-flex-between">
        <view class="u-card__head--left u-flex u-line-1" v-if="title">
          <image
            :src="thumb"
            class="u-card__head--left__thumb"
            mode="aspectFill"
            v-if="thumb"
            :style="{
              height: addUnit(thumbWidth),
              width: addUnit(thumbWidth),
              borderRadius: thumbCircle ? '50px' : '4px'
            }"
          ></image>
          <text
            class="u-card__head--left__title u-line-1"
            :style="{
              fontSize: addUnit(titleSize),
              color: titleColor
            }"
          >
            {{ title }}
          </text>
        </view>
        <view class="u-card__head--right u-line-1" v-if="subTitle">
          <text
            class="u-card__head__title__text"
            :style="{
              fontSize: addUnit(subTitleSize),
              color: subTitleColor
            }"
          >
            {{ subTitle }}
          </text>
        </view>
      </view>
      <slot name="head" v-else />
    </view>
    <view @tap="bodyClick" class="u-card__body" :style="[{ padding: addUnit(paddingBody || padding) }, bodyStyle]">
      <slot name="body" />
    </view>
    <view
      v-if="showFoot"
      class="u-card__foot"
      @tap="footClick"
      :style="[{ padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 }, footStyle]"
      :class="{
        'u-border-top': footBorderTop
      }"
    >
      <slot name="foot" />
    </view>
  </view>
 * card 卡片
 * @description 卡片组件一般用于多个列表条目，且风格统一的场景
 * @tutorial https://uview-plus.jiangruyi.com/components/card.html
 * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
 * @property {String} title 头部左边的标题
 * @property {String} title-color 标题颜色（默认#303133）
 * @property {String | Number} title-size 标题字体大小，单位rpx（默认15px）
 * @property {String} sub-title 头部右边的副标题
 * @property {String} sub-title-color 副标题颜色（默认#909399）
 * @property {String | Number} sub-title-size 副标题字体大小（默认13px
 * @property {Boolean} border 是否显示边框（默认true）
 * @property {String | Number} index 用于标识点击了第几个卡片
 * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
 * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
 * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认8px）
 * @property {Object} head-style 头部自定义样式，对象形式
 * @property {Object} body-style 中部自定义样式，对象形式
 * @property {Object} foot-style 底部自定义样式，对象形式
 * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
 * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
 * @property {Boolean} show-head 是否显示头部（默认true）
 * @property {Boolean} show-foot 是否显示尾部（默认true）
 * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
 * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位px（默认30px）
 * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
 * @event {Function} click 整个卡片任意位置被点击时触发
 * @event {Function} head-click 卡片头部被点击时触发
 * @event {Function} body-click 卡片主体部分被点击时触发
 * @event {Function} foot-click 卡片底部部分被点击时触发
 * @example <u-card paddingFoot="2px 15px" title="card"></u-card>
 */
  name: 'up-card',
  data() {
    return {};
  },
  mixins: [mpMixin, mixin, propsCard],
  emits: ['click', 'head-click', 'body-click', 'foot-click'],
  methods: {
    addStyle,
    addUnit,
    getPx,
    click() {
      this.$emit('click', this.index);
    },
    headClick() {
      this.$emit('head-click', this.index);
    },
    bodyClick() {
      this.$emit('body-click', this.index);
    },
    footClick() {
      this.$emit('foot-click', this.index);
    }
  }
+@import './style.css';
+</style>

package/uview-plus/components/u-cate-tab/style.css

@@ -0,0 +1,97 @@
+.u-cate-tab {
+  display: flex;
+  flex-direction: column;
+}
+.u-cate-tab__wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+.u-search-inner {
+  background-color: rgb(234, 234, 234);
+  border-radius: 100rpx;
+  display: flex;
+  align-items: center;
+  padding: 10rpx 16rpx;
+}
+.u-search-text {
+  font-size: 26rpx;
+  color: var(--u-tips-color);
+  margin-left: 10rpx;
+}
+.u-cate-tab__view {
+  width: 200rpx;
+  height: 100%;
+}
+.u-cate-tab__item {
+  height: 110rpx;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+  line-height: 1;
+}
+.u-cate-tab__item-active {
+  position: relative;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  background: #fff;
+}
+.u-cate-tab__item-active::before {
+  content: "";
+  position: absolute;
+  border-left: 4px solid var(--u-primary);
+  height: 32rpx;
+  left: 0;
+  top: 39rpx;
+}
+.u-cate-tab__view {
+  height: 100%;
+}
+.u-cate-tab__right-box {
+  flex: 1;
+  background-color: rgb(250, 250, 250);
+}
+.u-cate-tab__page-view {
+  padding: 16rpx;
+}
+.u-cate-tab__page-item {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
+.u-cate-tab__page-item:last-child {
+  min-height: 100vh;
+}
+.item-title {
+  font-size: 26rpx;
+  color: var(--u-main-color);
+  font-weight: bold;
+}
+.item-menu-name {
+  font-weight: normal;
+  font-size: 24rpx;
+  color: var(--u-main-color);
+}
+.item-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.thumb-box {
+  width: 33.333333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 20rpx;
+}
+.item-menu-image {
+  width: 120rpx;
+  height: 120rpx;
+}

package/uview-plus/components/u-cate-tab/style.scss

@@ -0,0 +1,114 @@
+.u-cate-tab {
+  display: flex;
+  flex-direction: column;
+}
+
+.u-cate-tab__wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.u-search-inner {
+  background-color: rgb(234, 234, 234);
+  border-radius: 100rpx;
+  display: flex;
+  align-items: center;
+  padding: 10rpx 16rpx;
+}
+
+.u-search-text {
+  font-size: 26rpx;
+  color: $u-tips-color;
+  margin-left: 10rpx;
+}
+
+.u-cate-tab__view {
+  width: 200rpx;
+  height: 100%;
+}
+
+.u-cate-tab__item {
+  height: 110rpx;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.u-cate-tab__item-active {
+  position: relative;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  background: #fff;
+}
+
+.u-cate-tab__item-active::before {
+  content: '';
+  position: absolute;
+  border-left: 4px solid $u-primary;
+  height: 32rpx;
+  left: 0;
+  top: 39rpx;
+}
+
+.u-cate-tab__view {
+  height: 100%;
+}
+
+.u-cate-tab__right-box {
+  flex: 1;
+  background-color: rgb(250, 250, 250);
+}
+
+.u-cate-tab__page-view {
+  padding: 16rpx;
+}
+
+.u-cate-tab__page-item {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
+
+.u-cate-tab__page-item:last-child {
+  min-height: 100vh;
+}
+
+.item-title {
+  font-size: 26rpx;
+  color: $u-main-color;
+  font-weight: bold;
+}
+
+.item-menu-name {
+  font-weight: normal;
+  font-size: 24rpx;
+  color: $u-main-color;
+}
+
+.item-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.thumb-box {
+  width: 33.333333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 20rpx;
+}
+
+.item-menu-image {
+  width: 120rpx;
+  height: 120rpx;
+}