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

今天是快乐倒数第二天！明天就是周五啦，最近工作很轻松，小程序在第二轮测试，因为我刚入职，分给我的都是一些样式上的bug。今天打开禅道，还是要求修改一些样式：

合起来背景颜色是灰色圆角 展开下圆角不见 带有边框 点击小类还有黄色底色

代码如下：

html:

<view class="tab-box" v-for="(item,index) in tabList" :style="{boxShadow:(index==bigTypeShow?'rgba(0, 0, 0, 0.09) 0px 3px 12px;':'#fff')}">
				<view class="titl" @click="changeShow(index)" :class="index==bigTypeShow?'sanjiaoxing':''">
					<view class="img"> 
					  <image :src="item.icon"  class="image"></image>
					  </view>
					<text>{{item.name}}</text>
				</view>
				<view v-show="index==bigTypeShow">
					<view class="items" v-for="(items,indexs) in item.list"  @click="cahngeItems(index,items)">{{items.governmentName}}
					</view>
				</view>
			</view>

卡片框框用的是box-shadow 绑定style属性

css:

.sanjiaoxing{
		border-bottom-left-radius: 0px;  /* 左下角 */
		border-bottom-right-radius: 0px; /* 右下角 */
	}

点击加号展开时 下边框消失

.items:hover{ 
		background: linear-gradient(to right, #F2E5CA, #FFF9F0);
		color:#B28C47 ;
		}

黄色背景和文字用的是悬浮

.titl::before{
		width: 15px;
		height: 15px;
		background-image: url("https://www.fyzhdj.com/wechatImage/homeE1/zdicon.png");
		position: absolute;
		content: '';
		right: 17px;
		background-repeat: no-repeat;
		background-size: 100% 100%; 
	}
	
	.sanjiaoxing::before{
		width: 15px;
		height: 15px;
		background-image: url("https://www.fyzhdj.com/wechatImage/homeE1/zkicon.png");
		position: absolute;
		content: '';
		right: 17px;
		background-repeat: no-repeat;
	    background-size: 100% 100%; 	
	}

正常情况下是加号 在titl后面添加before 点击展开时换成减号 在sanjiaoxing后面添加before