~xiaohui/daoAnOffice.git

			@@ -1,26 +1,27 @@

			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好
			## 开发中...可以提pr完善，框架已经搭建好


			## 项目描述

			[IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen/tree/main) 的 Vue3+vite版本，

			### 与vue2版本对比

			#### 功能

			功能采用与vue2版本相同功能

			因为要与vue2版本相同功能，有些组件不兼容vue3版本，例如：胶囊柱图，数字滚动皆重新封装为组件，整体来说，功能属实相同。根据自己需求选择[vue2](#vue2版本地址)版本与[vue3](#本项目地址 vue3+vite)版本

			#### 样式

			进行微调，整体看着更加美观


			[IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen/tree/main)Vue3+vite版本，功能样式采用一样

			- 项目需要全屏展示（按 F11）。

			- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用按需引入。

			- 项目环境：Vite、Echarts、Npm、Node，axios,mock。
			- 项目环境：Vite、Echarts、Npm、Node，axios,mock,vue3。

			- 请拉取 master 分支的代码，其余分支是开发分支。

			@@ -36,13 +37,15 @@

			项目展示

			![项目展示](https://img-blog.csdnimg.cn/f0b09cd868ae462d80807270b49210bb.png)
			![项目展示](https://www.daidaibg.com/bigscreen/a-img/home.png)

			### 项目预览地址

			[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)
			[https://www.daidaibg.com/bigscreen-vue3](https://www.daidaibg.com/bigscreen-vue3)

			### 项目仓库地址

			#### 本项目地址 vue3+vite

			github地址

			@@ -52,6 +55,18 @@

			[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)

			#### vue2版本地址

			github地址

			[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)

			Gitee地址

			[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)



			### 采用自适应组件方式，

			### 滚动设置，自适应设置
			@@ -59,7 +74,7 @@
			项目中可以进行滚动配置，内容是否滚动

			点击右上角设置按钮
			![设置](https://img-blog.csdnimg.cn/436e28d054bd475d9edfd41471f88441.png)
			![设置](https://www.daidaibg.com/bigscreen/a-img/setting.png)



			@@ -67,7 +82,7 @@



			![在这里插入图片描述](https://img-blog.csdnimg.cn/564c304c4b2249b1a525558eeb986497.png)
			![在这里插入图片描述](https://www.daidaibg.com/bigscreen/a-img/setting2.png)



			@@ -110,13 +125,19 @@
			mockXHR()
			```

			## 自适应缩放组件
			##

			### 注意
			## 公用组件

			封装了除面条外个别用到的组件

			### 自适应缩放组件

			#### 注意

			采用Scale方式，会自动给组件父元素添加overflow:hidden

			### 使用
			#### 使用

			```vue
			<template>
			@@ -138,7 +159,9 @@
			}
			</script>
			```
			### API

			#### API

			\| 属性 \| 说明 \| 类型 \| 默认值 \|
			\| ------------ \| ------------------------------------------------------------ \| -------------------------------- \| ------ \|
			\| selfAdaption \| 是否进行自适应 \| Boolean \| true \|
			@@ -149,10 +172,6 @@
			\| fullScreen \| 全屏自适应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启 \| Boolean \| false \|
			\| boxStyle \| 修改容器样式，如居中展示时侧边背景色，符合Vue双向绑定style标准格式 \| Object \| null \|
			\| wrapperStyle \| 修改自适应区域样式，符合Vue双向绑定style标准格式 \| Object \| null \|

			## 公用组件

			封装了除面条外个别用到的组件


			### 外边框
			@@ -231,7 +250,41 @@
			}
			```

			### 胶囊柱图

			#### Props

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :----: \| :------: \| :-------------: \| :-----------------------: \| :-----: \|
			\| data \| 柱数据 \| `Array<Object>` \| [data属性](#data属性) \| `[]` \|
			\| config \| 基础配置 \| Object \| [config属性](#config属性) \| `false` \|

			#### config属性

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :-------: \| :------: \| :-------------: \| :----: \| :-----: \|
			\| unit \| 单位 \| `String` \| --- \| `''` \|
			\| colors \| 环颜色 \| `Array<String>` \| [1] \| [2] \|
			\| showValue \| 显示数值 \| `Boolean` \| --- \| `false` \|

			#### 注释config注释

			[1] 颜色支持`hex\|rgb\|rgba\|颜色关键字`等四种类型。

			[2] 默认配色为`['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']`。

			#### data属性

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :---: \| :------: \| :------: \| :----: \| :----: \|
			\| name \| 柱名称 \| `String` \| --- \| --- \|
			\| value \| 柱对应值 \| `Number` \| --- \| --- \|

			### 无缝轮播组件

			看此文档优化次源码

			[https://doc.wssio.com/opensource/vue3-seamless-scroll/](https://doc.wssio.com/opensource/vue3-seamless-scroll/)

			## 中间地图