first commit

历届学生/苏琪/项目练习/newApp/appFont/components/uni-badge/uni-badge.vue

@@ -0,0 +1,99 @@
+<template>
+	<text v-if="text" :class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" class="uni-badge" @click="onClick()">{{ text }}</text>
+</template>
+
+<script>
+	export default {
+		name: 'UniBadge',
+		props: {
+			type: {
+				type: String,
+				default: 'default'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			text: {
+				type: [String, Number],
+				default: ''
+			},
+			size: { // small.normal
+				type: String,
+				default: 'normal'
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.uni-badge {
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
+		box-sizing: border-box;
+		font-size: 12px;
+		line-height: 1;
+		display: inline-block;
+		padding: 3px 6px;
+		color: #333;
+		border-radius: 100px;
+		background-color: #f1f1f1
+	}
+
+	.uni-badge.uni-badge-inverted {
+		padding: 0 5px 0 0;
+		color: #999;
+		background-color: transparent
+	}
+
+	.uni-badge-primary {
+		color: #fff;
+		background-color: #007aff
+	}
+
+	.uni-badge-primary.uni-badge-inverted {
+		color: #007aff;
+		background-color: transparent
+	}
+
+	.uni-badge-success {
+		color: #fff;
+		background-color: #4cd964
+	}
+
+	.uni-badge-success.uni-badge-inverted {
+		color: #4cd964;
+		background-color: transparent
+	}
+
+	.uni-badge-warning {
+		color: #fff;
+		background-color: #f0ad4e
+	}
+
+	.uni-badge-warning.uni-badge-inverted {
+		color: #f0ad4e;
+		background-color: transparent
+	}
+
+	.uni-badge-error {
+		color: #fff;
+		background-color: #dd524d
+	}
+
+	.uni-badge-error.uni-badge-inverted {
+		color: #dd524d;
+		background-color: transparent
+	}
+
+	.uni-badge--small {
+		transform: scale(.8);
+		transform-origin: center center
+	}
+</style>

历届学生/苏琪/项目练习/newApp/appFont/components/uni-list-item/uni-list-item.vue

@@ -0,0 +1,199 @@
+<template>
+	<view :class="disabled ? 'uni-list-item--disabled' : ''" :hover-class="disabled || showSwitch ? '' : 'uni-list-item--hover'" class="uni-list-item" @click="onClick">
+		<view class="uni-list-item__container">
+			<view v-if="thumb" class="uni-list-item__icon">
+				<image :src="thumb" class="uni-list-item__icon-img" />
+			</view>
+			<view v-else-if="showExtraIcon" class="uni-list-item__icon">
+				<uni-icon class="uni-icon-wrapper" :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
+			</view>
+			<view class="uni-list-item__content">
+				<view class="uni-list-item__content-title">{{ title }}</view>
+				<view v-if="note" class="uni-list-item__content-note">{{ note }}</view>
+			</view>
+			<view v-if="showBadge || showArrow || showSwitch" class="uni-list-item__extra">
+				<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
+				<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
+				<uni-icon class="uni-icon-wrapper" v-if="showArrow" :size="20" color="#bbb" type="arrowright" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcon from '../uni-icon/uni-icon.vue'
+	import uniBadge from '../uni-badge/uni-badge.vue'
+	export default {
+		name: 'UniListItem',
+		components: {
+			uniIcon,
+			uniBadge
+		},
+		props: {
+			title: {
+				type: String,
+				default: ''
+			}, // 列表标题
+			note: {
+				type: String,
+				default: ''
+			}, // 列表描述
+			disabled: { // 是否禁用
+				type: Boolean,
+				default: false
+			},
+			showArrow: { // 是否显示箭头
+				type: Boolean,
+				default: true
+			},
+			showBadge: { // 是否显示数字角标
+				type: Boolean,
+				default: false
+			},
+			showSwitch: { // 是否显示Switch
+				type: Boolean,
+				default: false
+			},
+			switchChecked: { // Switch是否被选中
+				type: Boolean,
+				default: false
+			},
+			badgeText: {
+				type: [String, Number],
+				default: ''
+			}, // badge内容
+			badgeType: { // badge类型
+				type: String,
+				default: 'success'
+			},
+			thumb: {
+				type: String,
+				default: ''
+			}, // 缩略图
+			showExtraIcon: { // 是否显示扩展图标
+				type: Boolean,
+				default: false
+			},
+			extraIcon: {
+				type: Object,
+				default () {
+					return {
+						type: 'contact',
+						color: '#000000',
+						size: 20
+					}
+				}
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			},
+			onSwitchChange(e) {
+				this.$emit('switchChange', e.detail)
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.uni-list-item {
+		font-size: 32upx;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center
+	}
+
+	.uni-list-item--disabled {
+		opacity: .3
+	}
+
+	.uni-list-item--hover {
+		background-color: #f1f1f1
+	}
+
+	.uni-list-item__container {
+		padding: 24upx 30upx;
+		width: 100%;
+		box-sizing: border-box;
+		flex: 1;
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center
+	}
+
+	.uni-list-item__container:after {
+		position: absolute;
+		z-index: 3;
+		right: 0;
+		bottom: 0;
+		left: 30upx;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: #c8c7cc
+	}
+
+	.uni-list-item__content {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column
+	}
+
+	.uni-list-item__content-title {
+		font-size: 32upx;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: inherit;
+		line-height: 1.5;
+		overflow: hidden
+	}
+
+	.uni-list-item__content-note {
+		color: #999;
+		font-size: 28upx;
+		white-space: normal;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden
+	}
+
+	.uni-list-item__extra {
+		width: 25%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center
+	}
+
+	.uni-list-item__icon {
+		margin-right: 18upx;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center
+	}
+
+	.uni-list-item__icon-img {
+		height: 52upx;
+		width: 52upx
+	}
+
+	.uni-list>.uni-list-item:last-child .uni-list-item-container:after {
+		height: 0
+	}
+</style>

历届学生/苏琪/项目练习/newApp/appFont/components/uni-list/uni-list.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="uni-list">
+		<slot />
+	</view>
+</template>
+<script>
+	export default {
+		name: 'UniList'
+	}
+</script>
+<style>
+	@charset "UTF-8";
+
+	.uni-list {
+		background-color: #fff;
+		position: relative;
+		width: 100%;
+		display: flex;
+		flex-direction: column
+	}
+
+	.uni-list:after {
+		position: absolute;
+		z-index: 10;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: #c8c7cc
+	}
+
+	.uni-list:before {
+		position: absolute;
+		z-index: 10;
+		right: 0;
+		top: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: #c8c7cc
+	}
+</style>

历届学生/苏琪/项目练习/newApp/appFont/components/uni-segmented-control/uni-segmented-control.vue

@@ -0,0 +1,114 @@
+<template>
+	<view :class="{ text: styleType === 'text' }" :style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
+		<view v-for="(item, index) in values" :class="[{ text: styleType === 'text' }, { active: index === currentIndex }]" :key="index" :style="{
+        color:
+          index === currentIndex
+            ? styleType === 'text'
+              ? activeColor
+              : '#fff'
+            : styleType === 'text'
+              ? '#000'
+              : activeColor,
+        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : ''
+      }" class="segmented-control-item" @click="_onClick(index)">
+			{{ item }}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniSegmentedControl',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#007aff'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val
+				}
+			}
+		},
+		created() {
+			this.currentIndex = this.current
+		},
+		methods: {
+			_onClick(index) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index
+					this.$emit('clickItem', index)
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.segmented-control {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		width: 100%;
+		font-size: 28upx;
+		box-sizing: border-box;
+		margin: 0 auto;
+		overflow: hidden;
+		border: 1px solid;
+		border-radius: 10upx
+	}
+
+	.segmented-control.text {
+		border: 0;
+		border-radius: 0;
+		position: relative;
+	}
+
+	.segmented-control-item {
+		flex: 1;
+		text-align: center;
+		line-height: 60upx;
+		box-sizing: border-box;
+		border-left: 1px solid
+	}
+
+	.segmented-control-item.active {
+		color: #fff
+	}
+
+	.segmented-control-item.text {
+		border-left: 0;
+		color: #000
+	}
+
+	.segmented-control-item.text.active {
+		border-bottom-style: solid;
+		border-bottom:2px solid #4c86f7;
+	}
+	.segmented-control-item:first-child {
+		border-left-width: 0
+	}
+</style>