女前端程序员入职第一天----修改bug

入职第一天，写俩页面，老板夸了夸我，然后就开始改公司的小程序bug啦

今天开始立志持续写文章积累经验 加油噢！！

bug汇总：

1：页面还原度问题 和ui设计稿不一样 工作点：添加动态图标 下拉箭头改成加减号图标

原图：

结果图：

代码如下：

html:

<view class="titl" @click="changeShow(index)" :class="index==bigTypeShow?'sanjiaoxing':''" :style="{background:(index==bigTypeShow?'#f0f0f0':'#fff')}">
<view class="img"> 
 <image :src="item.icon"  class="image"></image>
 </view>
<text>{{item.name}}</text>
</view>

css:

.titl::before{
		width: 15px;
		height: 15px;
		background-image: url("图片名字");
		position: absolute;
		content: '';
		right: 17px;
		background-repeat: no-repeat;
		background-size: 100% 100%; 
	}
	
	.sanjiaoxing::before{
		width: 15px;
		height: 15px;
		background-image: url("图片名字");
		position: absolute;
		content: '';
		right: 17px;
		background-repeat: no-repeat;
	    background-size: 100% 100%; 	
	}

css用了：before做 感觉还蛮简单的 

js部分就不贴图了 不懂来问

2：

首页加轮播图 因为原设计只是一张图片 现设计要求增加轮播效果 并且下方组件悬浮在轮播图上方

如图：

代码如下：

html:

<view class="wrap">
	<u-swiper :list="pictureList" mode="round" height='600' name="url"></u-swiper>
</view>

js:

getAdvertising() {
				let _this = this
				let params = {
					wechatId: _this.userInfoData.wechatId
				}
				wx.request({
					url: _this.$httpApi.install.advertisingSpaceList,
					data: params,
					method: 'GET',
					success: function(res) {
						_this.messageList = res.data.rows
						console.log(_this.messageList.length,"999999")
						if(_this.messageList.length == 0){
							_this.pictureList.push({
								url: _this.newUrl+ '/homeE1/lbbeijing.png',
								// id: index
							})
							console.log(_this.pictureList)
						}else{
							let newList = []
							let index = 0
							for (var i in _this.messageList) {
								newList.push({
									url: _this.fileUrl+ _this.messageList[i].picture.split(",")[0],
									// id: index
								})
								index++
							}
							_this.pictureList = newList
							console.log("新图片", _this.pictureList)
						}
					}
				})
			},

css:

.wrap {
		display: flex;
		height: 100vh;
		line-height: 100px;
		position: absolute;
		width: 100%;

		/deep/.data-v-1b7bfbe4 {
			width: 100%;
		}

		/deep/.u-swiper-indicator.data-v-a5b2d580 {
			margin-bottom: 60px;
		}

	}

	.medium {
		height: 1000px;
	}

注：medium是下方组件盒子名称 悬浮我用了absolute 不知道还有没有更好的办法 欢迎讨论！！

累了 写俩得了 还有俩小时下班！！！！！！886