2024.01.17 补充提交

App.vue

@@ -176,9 +176,12 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="scss">
 @import './app.css';
 
+/*每个页面公共css */
+@import "uview-ui/index.scss";
+
 .tui-badge.tui-danger.tui-badge-scale {
   box-shadow: 0px 0 1upx #ed3f14;
   border: 4upx solid #fff;

components/thorui/tui-roll-news/tui-roll-news.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="tui-roll-news"
+		:style="{background:background,width:!width?'100%':width+'rpx',padding:padding,borderRadius:radius+'rpx'}">
+		<view class="tui-notice__shrink" @tap.stop="leftClick">
+			<slot></slot>
+		</view>
+		<swiper :vertical="vertical" :autoplay="true" :circular="true" :interval="interval"
+			class="tui-roll__news-swiper" :style="{height:height+'rpx'}">
+			<swiper-item v-for="(item,index) in list" :key="index" class="tui-roll__news-item">
+				<text class="tui-rollnews__text"
+					:style="{color:color,fontSize:size+'rpx',fontWeight:bold?'bold':'',lines:lines,'-webkit-line-clamp':lines}"
+					@tap="onClick(index)">{{item[prop] || ''}}</text>
+			</swiper-item>
+		</swiper>
+		<view class="tui-notice__shrink" @tap.stop="rightClick">
+			<slot name="right"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tui-roll-news",
+		emits: ['click', 'leftClick', 'rightClick'],
+		props: {
+			list: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			//list 显示key
+			prop: {
+				type: String,
+				default: 'title'
+			},
+			width: {
+				type: [Number, String],
+				default: 0
+			},
+			//滚动消息高度
+			height: {
+				type: [Number, String],
+				default: 80
+			},
+			//字体大小 rpx
+			size: {
+				type: [Number, String],
+				default: 28
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			background: {
+				type: String,
+				default: '#fff'
+			},
+			radius: {
+				type: [Number, String],
+				default: 0
+			},
+			padding: {
+				type: String,
+				default: '0 30rpx'
+			},
+			//内容显示行数，超出隐藏
+			lines: {
+				type: Number,
+				default: 1
+			},
+			//自动切换时间间隔（毫秒）
+			interval: {
+				type: Number,
+				default: 3000
+			},
+			//是否纵向滚动切换内容
+			vertical: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		methods: {
+			onClick(index) {
+				const item = this.list[index]
+				this.$emit('click', {
+					index: index,
+					item: item
+				})
+			},
+			leftClick() {
+				this.$emit('leftClick', {})
+			},
+			rightClick() {
+				this.$emit('rightClick', {})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-roll-news {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		overflow: hidden;
+	}
+
+	.tui-notice__shrink {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		display: flex;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.tui-roll__news-swiper {
+		flex: 1;
+	}
+
+	.tui-roll__news-item {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.tui-rollnews__text {
+		/* #ifndef APP-NVUE */
+		display: -webkit-box;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: normal;
+		-webkit-box-orient: vertical;
+		/* #endif */
+		overflow: hidden;
+	}
+</style>

main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import App from './App'
+import uView from 'uview-ui'
+Vue.use(uView)
 import store from './store'
 import globalMixin from './mixin/global'
 

uni.scss

@@ -0,0 +1,93 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+// 网站主题色调
+$fontColor: #333;  // 字体色
+$mainColor: #C5AA7B; // 主色
+$lightColor: #f5a864; // 淡色
+$bgColor: #fff; // 背景色
+/* 颜色变量 */
+/* 页面左右间距 */
+$page-row-spacing: 30upx;
+$page-color-base: #f8f8f8;
+$page-color-light: #f8f6fc;
+$base-color: #C5AA7B;
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#f8f8f8;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:24upx;
+$uni-font-size-base:28upx;
+$uni-font-size-lg:32upx;
+/*文字颜色*/
+$font-color-dark: #303133;
+$font-color-base: #606266;
+$font-color-light: #909399;
+$font-color-disabled: #C0C4CC;
+$font-color-spec: #4399fc;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40upx;
+$uni-img-size-base:52upx;
+$uni-img-size-lg:80upx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4upx;
+$uni-border-radius-base: 6upx;
+$uni-border-radius-lg: 12upx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20upx;
+$uni-spacing-row-lg: 30upx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8upx;
+$uni-spacing-col-base: 16upx;
+$uni-spacing-col-lg: 24upx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40upx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36upx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30upx;
+
+@import 'uview-ui/theme.scss';