# doc

**Repository Path**: zjsj_lize/doc

## Basic Information

- **Project Name**: doc
- **Description**: 文档管理静态网页
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-28
- **Last Updated**: 2022-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img alt="logo" src="static/image/nodata.svg" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">SPMS项目文档</h3>

## 说明

请项目成员在此记录项目开发经验、组件封装说明等项目相关文档。

## 基础配置
[后台接口管理地址](http://47.95.254.228:8081/rdp/#/home)

[系统web端](http://47.95.254.228:8089/frontend/jcdp2-ft-debug/smartadmin.html?type=page&dataUrl=http://47.95.254.228:8089/backend/page/getPage?key%3Dundefined%26id%3De2356ae36d6f465ea27feaffd0661f10)

## 工具库

## 组件说明
### 概述
> [uni-ui组件示例地址](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)

> [uni-ui扩展组件官方文档](https://uniapp.dcloud.io/component/uniui/uni-ui.html)
---
> [uview组件官方文档](https://www.uviewui.com/components/intro.html)
---
项目以uview为基础，对于某些需要补充使用的uni-ui扩展组件，以uni-list为例，使用组件步骤如下：
1. 下载：点击[uni-list](https://uniapp.dcloud.io/component/uniui/uni-list.html)文档官方文档，官方文档有直通插件市场链接，或者直接在decloud插件市场搜索。
选择**下载插件ZIP**。
2. 解压：解压下载的插件，直接将其放入uni_modules根目录下。
3. 使用：uni-ui组件符合[easycom组件规范](https://uniapp.dcloud.net.cn/collocation/pages.html#style)，放到uni_modules或components目录下，在组件内使用时，
不需要引用，可直接使用。
```
<template>
	<view>
		<nav-bar title='新闻列表'></nav-bar>
		<uni-list>
			<uni-list-item v-for="(item,index) in list" ellipsis="2" :title="item.title" :note="`姓名:${item.createBy}`"
				:rightText="$u.timeFormat(item.updateTime, 'yyyy-mm-dd')" showArrow clickable @click="getNewsDetail(item)" />
		</uni-list>
	</view>
</template>
```
### uni-list
	> 新闻列表组件
	[uni-list官方文档](https://uniapp.dcloud.io/component/uniui/uni-list.html#api)
### uni-section
	> 标题装饰组件
	标题装饰组件过于简单，官方没有文档
### u-swiper
	>图片轮播组件
	图片轮播组件修改了u-swiper中组件源码，将image和video标签的判断修改为根据字段type判。
	当不设置type或者type值为'image'时，为图片；当设置为'video'时，为视频。
```
	picList: [{
		"image": "https://cdn.uviewui.com/uview/swiper/swiper2.png",
		"title": null
	}, {
		"image": "https://cdn.uviewui.com/uview/swiper/swiper2.png",
		"title": null,
		"type":"image"
	}, {
		"image": "http://47.95.254.228:8089/backend/system/attachment/imgView?id=1461131938989211649",
		"title": null,
		"type":"image"
	}],
```
## 内置样式
### 覆盖组件样式方法：
1. 建议使用scss语法：
```
<style lang="scss">
	.uni-list{
		.short_list {
			/deep/ .uni-list-item__container {
				padding: 4px 8px;
			}
			background-color: transparent;
		}
		background-color: transparent;
	}
</style>
```
**问题场景**：在使用uni扩展组件list的时候，需要修改list行之间的间距，需要修改类“uni-list-item__container”的padding属性，此类名定义在组件内，组件样式因为scope属性，会为组件内部类名
增加唯一的id值，外部无法直接通过类名修改样式。

**解决方案**：在scss语法中，使用/deep/属性，强行穿透css样式，修改对应属性。
2.可以使用css穿透样式“>>>”:
```
<style>
	.short_list >>> .uni-list-item__container {
			padding: 4px 8px;}
</style>
```
## 注意事项