chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_lbw' of gitea.langsi.online:youmanlu/youmanlu-teacher-uniapp into tx

Browse Source
This commit is contained in:
taoxu 2023-12-08 15:29:46 +08:00
commit 17a804efe1
4 changed files with 425 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pages_teacher/teacher_teachers/components/audiology.vue
View File

@ -35,9 +35,6 @@
<view class="partshow" v-if="tk==partitem.id"> <view class="partshow" v-if="tk==partitem.id">
<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> <view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex">
<view class="imaflex"> <view class="imaflex">
<view class="image">
<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode="">
</view>
<view>{{quesitem.typeText}}</view> <view>{{quesitem.typeText}}</view>
</view> </view>
<view> <view>
@ -94,32 +91,51 @@
this.image = !this.image this.image = !this.image
this.tk = id this.tk = id
if (this.image == false) { if (this.image == false) {
this.tk = id
}else {
this.tk = null this.tk = null
} }
}, },
checkboxChange(parat, e) { checkboxChange(parat, e) {
if (e.value) { if (e.value) {
this.checked.push(parat.id) this.checked.push(parat.id)
const allItemsNoSubsets = parat.modules.every(item => !('subsets' in item));
parat.modules.forEach(item=>{
this.$set(item, 'subsets', item.id);
item.subsets = item.id;
this.subsets.push(item.id)
console.log( item.subsets)
})
} else { } else {
let index = this.checked.indexOf(parat.id); let index = this.checked.indexOf(parat.id);
if (index !== -1) { if (index !== -1) {
this.checked.splice(index, 1); this.checked.splice(index, 1);
parat.modules.forEach(item=>{
this.$delete(item, 'subsets');
const index = this.subsets.indexOf(item.id);
if (index !== -1) {
this.subsets.splice(index, 1);
}
})
} }
} }
console.log(this.checked) console.log(this.checked,'part数组')
this.$forceUpdate() this.$forceUpdate()
}, },
checkoutzj(quesitem, id) { checkoutzj(quesitem, id) {
if (id.value) { if (id.value) {
this.subsets.push(quesitem.id) this.subsets.push(quesitem.id)
console.log(quesitem)
} else { } else {
let index2 = this.subsets.indexOf(quesitem.id); let index2 = this.subsets.indexOf(quesitem.id);
if (index2 !== -1) { if (index2 !== -1) {
this.subsets.splice(index2, 1); this.subsets.splice(index2, 1);
} }
} }
console.log(this.subsets) console.log(this.subsets,'题型数组')
} }
} }
} }

55
pages_teacher/teacher_teachers/components/reading.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<!-- 阅读 --> <!-- 听力 -->
<view> <view>
<!-- 外层循环 --> <!-- 外层循环 -->
<view v-for="(item,index) in listHearing" :key="item.id"> <view v-for="(item,index) in listHearing" :key="item.id">
@ -9,15 +9,14 @@
</view> </view>
<view class="substance"> <view class="substance">
<!-- 渲染Text --> <!-- 渲染Text -->
<text :class="{'active': itemActive[item.id] === TextIndex || TextIndex === 0}" v-for="(TextItem,TextIndex) in item.tests" <text :class="{ 'active': itemActive[item.id] === TextIndex }" v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex"
:key="TextIndex" @click="Bages_addActive(TextIndex,item.id)" class="zz"> @click="Bages_addActive(TextIndex,item.id) ">
{{TextItem.name}} {{TextItem.name}}
</text> </text>
</view> </view>
<!-- 渲染part --> <!-- 渲染part -->
<view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex"> <view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex">
<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex">
<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex || TextIndex==0">
<view> <view>
<view class="Part1"> <view class="Part1">
<view class="imaflex" @click="icon(partitem.id)"> <view class="imaflex" @click="icon(partitem.id)">
@ -36,9 +35,6 @@
<view class="partshow" v-if="tk==partitem.id"> <view class="partshow" v-if="tk==partitem.id">
<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> <view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex">
<view class="imaflex"> <view class="imaflex">
<view class="image">
<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode="">
</view>
<view>{{quesitem.typeText}}</view> <view>{{quesitem.typeText}}</view>
</view> </view>
<view> <view>
@ -57,17 +53,12 @@
export default { export default {
data() { data() {
return { return {
selepad: [],
listHearing: [], listHearing: [],
checked: [], checked: [],
subsets: [], subsets: [],
itemActive: {}, itemActive: {},
image: true, image: true,
tk: null, tk: null,
list2: [{
value: '选项1',
id: '1'
}],
} }
}, },
@ -75,52 +66,76 @@
this.hearing() this.hearing()
}, },
methods: { methods: {
// 阅读调取接口渲染 // 听力调取接口渲染
hearing() { hearing() {
this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', { this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', {
classify: 2 classify: 2
}).then(res => { }).then(res => {
this.listHearing = res.data this.listHearing = res.data
let activeindex = {}
let arr = res.data
for (let parper of arr) {
let test = parper.tests[0]
activeindex[parper.id] = 0
}
this.itemActive = activeindex
}) })
}, },
// 听力test点击事件 // 听力test点击事件
Bages_addActive(textindex, pid) { Bages_addActive(TextIndex, id) {
this.itemActive[pid] = textindex this.itemActive[id] = TextIndex
this.$forceUpdate() this.$forceUpdate()
}, },
// 点击变化图表 // 点击变化图表
icon(id) { icon(id) {
this.image = !this.image this.image = !this.image
this.tk = id this.tk = id
if (this.image == false) { if (this.image == false) {
this.tk = id
}else {
this.tk = null this.tk = null
} }
}, },
checkboxChange(parat, e) { checkboxChange(parat, e) {
if (e.value) { if (e.value) {
this.checked.push(parat.id) this.checked.push(parat.id)
const allItemsNoSubsets = parat.modules.every(item => !('subsets' in item));
parat.modules.forEach(item=>{
this.$set(item, 'subsets', item.id);
item.subsets = item.id;
this.subsets.push(item.id)
console.log( item.subsets)
})
} else { } else {
let index = this.checked.indexOf(parat.id); let index = this.checked.indexOf(parat.id);
if (index !== -1) { if (index !== -1) {
this.checked.splice(index, 1); this.checked.splice(index, 1);
parat.modules.forEach(item=>{
this.$delete(item, 'subsets');
const index = this.subsets.indexOf(item.id);
if (index !== -1) {
this.subsets.splice(index, 1);
} }
})
} }
console.log(this.checked) }
console.log(this.checked,'part数组')
this.$forceUpdate() this.$forceUpdate()
}, },
checkoutzj(quesitem, id) { checkoutzj(quesitem, id) {
if (id.value) { if (id.value) {
this.subsets.push(quesitem.id) this.subsets.push(quesitem.id)
console.log(quesitem)
} else { } else {
let index2 = this.subsets.indexOf(quesitem.id); let index2 = this.subsets.indexOf(quesitem.id);
if (index2 !== -1) { if (index2 !== -1) {
this.subsets.splice(index2, 1); this.subsets.splice(index2, 1);
} }
} }
console.log(this.subsets) console.log(this.subsets,'题型数组')
} }
} }
} }
@ -142,10 +157,12 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
} }
} }
.Part1 { .Part1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

158
pages_teacher/teacher_teachers/components/slander.vue
View File

@ -3,8 +3,10 @@
<view> <view>
<view class="view_left"> <view class="view_left">
<view class="view_left_pd" @click="arrow_xl"> <view class="view_left_pd" @click="arrow_xl">
{{selectedOption}} <view class="pull_down">
<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> <view>{{selectedOption}}</view>
<u-icon name="arrow-down" size="22"></u-icon>
</view>
<view class="pull_Down" v-if="arrow"> <view class="pull_Down" v-if="arrow">
<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view> <view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view>
</view> </view>
@ -16,20 +18,33 @@
<view class="header_part"> <view class="header_part">
<view class="unite">{{item.label}}</view> <view class="unite">{{item.label}}</view>
</view> </view>
</view> <view class="bottom_one" v-if="part2">
<view v-for="(items,indexs) in item.list" :key='indexs'> <view class="blue">串题</view>
<!-- 白色大背景边框 --> <view class="blue">跟读</view>
<view class="slander_for">
<view class="textual">
{{items.topicEn}}
</view>
<view class="bottom_one">
<view>串题</view>
<view>跟读</view>
<view>模考</view> <view>模考</view>
</view> </view>
</view> </view>
<!-- part1-->
<view class="slander_for">
<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
<view class="textual">
{{items.topicEn}}
</view>
<view class="bottom_one" v-if="grizzly">
<view class="blue">串题</view>
<view class="blue">跟读</view>
<view>模考</view>
</view>
</view>
</view>
<!-- part2-->
<view class="slander_for" v-if="part2">
<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
<view class="textual2">
{{items.topicEn}}
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -37,9 +52,9 @@
<script> <script>
export default { export default {
data(){ data() {
return { return {
postdata :{ postdata: {
"key": "", "key": "",
"pageNum": 0, "pageNum": 0,
"mode": "home", "mode": "home",
@ -55,19 +70,20 @@
}, },
//口语 //口语
slander: [], slander: [],
categorize:'分类', part2:false,
grizzly:true,
categorize: '分类',
// 下拉框的v-if布尔值 // 下拉框的v-if布尔值
selectedOption:'Part1', selectedOption: 'Part1',
arrow:false, arrow: false,
arrowDown:false, arrowDown: false,
options:[ options: [{
{ id: 1,
id:1, name: 'Part1'
name:'Part1'
}, },
{ {
id:2, id: 2,
name:'Part2' name: 'Part2'
} }
], ],
} }
@ -75,10 +91,10 @@
created() { created() {
this.getList() this.getList()
}, },
methods:{ methods: {
getList() { getList() {
this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list',this.postdata).then(res => { this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', this.postdata).then(res => {
let keyArr = Object.keys(res.data) let keyArr = Object.keys(res.data)
let valueArr = Object.values(res.data) let valueArr = Object.values(res.data)
this.slander = keyArr.map((item, index) => { this.slander = keyArr.map((item, index) => {
@ -90,22 +106,26 @@
}) })
}, },
//下拉显示下拉框 //下拉显示下拉框
arrow_xl(){ arrow_xl() {
this.arrow=!this.arrow this.arrow = !this.arrow
}, },
arrow_xl2(){ arrow_xl2() {
this.arrowDown=!this.arrowDown this.arrowDown = !this.arrowDown
}, },
arrow_options(id){ arrow_options(id) {
this.options.forEach(item=>{ this.options.forEach(item => {
if(item.id== id){ if (item.id == id) {
this.selectedOption=item.name this.selectedOption = item.name
}else if(id==2){ } else if (id == 2) {
this.postdata.part="part2" this.postdata.part = "part2"
this.part2=true
this.grizzly = false
this.getList() this.getList()
}else{ } else {
this.postdata.part="part1" this.postdata.part = "part1"
this.part2= false
this.grizzly = true
this.getList() this.getList()
} }
}) })
@ -115,13 +135,13 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.view_left { .view_left {
display: flex; display: flex;
justify-content: left; justify-content: left;
margin-top: 20rpx; margin-top: 20rpx;
} }
.view_inuygs{
.view_inuygs {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -136,6 +156,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #072F5A; color: #072F5A;
} }
.unite { .unite {
font-size: 28rpx; font-size: 28rpx;
font-family: 'PingFang'; font-family: 'PingFang';
@ -144,60 +165,85 @@
margin-right: 20rpx; margin-right: 20rpx;
} }
.pull_Down { .pull_Down {
position: absolute; position: absolute;
bottom: -130rpx; bottom: -130rpx;
left: 50%; left: 50%;
margin-left: -79rpx; margin-left: -79rpx;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.25); box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 20rpx 20rpx 20rpx 20rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;
background: #FFFFFF; background: #FFFFFF;
border-bottom: 2rpx solid #F2F2F2; border-bottom: 2rpx solid #F2F2F2;
view { view {
padding: 15rpx 50rpx; padding: 15rpx 50rpx;
border-bottom: 2rpx solid #F2F2F2; border-bottom: 2rpx solid #F2F2F2;
} }
} }
.pull_Down view:last-child { .pull_Down view:last-child {
border: none; border: none;
} }
.pd_icon {
margin-left: 8rpx;
} .header_part {
.header_part{
display: flex; display: flex;
align-items: center; align-items: center;
margin: 26rpx 0rpx; margin: 26rpx 0rpx;
} }
.slander_an{
.slander_an {
padding: 6rpx 18rpx; padding: 6rpx 18rpx;
background: #fff; background: #fff;
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
margin-left: 12rpx; margin-left: 12rpx;
color: #65748C; color: #65748C;
} }
.blue {
background: rgba(45,124,230,0.1); .slander_for {
color: #2D7CE6; background-color: #fff;
border-radius: 20rpx 20rpx 20rpx 20rpx;
} }
.slander_for{
.slander_of {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #fff; padding: 24rpx 0;
margin: 0 20rpx;
border-bottom: 2rpx solid #F2F2F2;
} }
.textual{
.textual {
width: 290rpx; width: 290rpx;
height: 80rpx;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.bottom_one{
display: flex;
.bottom_one {
display: flex;
view {
padding: 6rpx 18rpx;
background: #F4F4F4;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-size: 20rpx;
font-weight: 500;
color: rgba(101,116,140,0.8);
margin-left: 15rpx;
}
.blue {
background: rgba(45, 124, 230, 0.1);
color: #2D7CE6;
}
}
.pull_down{
display: flex;
justify-content: space-between;
width: 100rpx;
font-size: 24rpx;
} }
</style> </style>

249
pages_teacher/teacher_teachers/teacher_writeadd.vue
View File

@ -15,7 +15,54 @@
<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper"> <swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper">
<!-- 口语 --> <!-- 口语 -->
<swiper-item style="height: 300rpx;"> <swiper-item style="height: 300rpx;">
<slander></slander> <view>
<view class="view_left">
<view class="view_left_pd" @click="arrow_xl">
<view class="pull_down">
<view>{{selectedOption}}</view>
<u-icon name="arrow-down" size="22"></u-icon>
</view>
<view class="pull_Down" v-if="arrow">
<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view>
</view>
</view>
</view>
<!-- 口语主体 -->
<view v-for="(item,index) in slander" :key="index">
<view class="view_inuygs">
<view class="header_part">
<view class="unite">{{item.label}}</view>
</view>
<view class="bottom_one" v-if="part2">
<view class="blue">串题</view>
<view class="blue">跟读</view>
<view>模考</view>
</view>
</view>
<!-- part1-->
<view class="slander_for">
<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
<view class="textual">
{{items.topicEn}}
</view>
<view class="bottom_one" v-if="grizzly">
<view class="blue">串题</view>
<view class="blue">跟读</view>
<view>模考</view>
</view>
</view>
</view>
<!-- part2-->
<view class="slander_for" v-if="part2">
<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
<view class="textual2">
{{items.topicEn}}
</view>
</view>
</view>
</view>
</view>
</swiper-item> </swiper-item>
<!-- 写作 --> <!-- 写作 -->
<swiper-item> <swiper-item>
@ -79,14 +126,49 @@
search: true, search: true,
listType: [], listType: [],
idList: [], idList: [],
// 口语
postdata: {
"key": "",
"pageNum": 0,
"mode": "home",
"part": "part1",
"order": "0",
"type": "",
"isStudy": 0,
"isFavorite": 0,
"isEvlua": 0,
"isFun": 0,
"level": 0,
"isNew": 0
},
//口语
slander: [],
part2:false,
grizzly:true,
categorize: '分类',
// 下拉框的v-if布尔值
selectedOption: 'Part1',
arrow: false,
arrowDown: false,
options: [{
id: 1,
name: 'Part1'
},
{
id: 2,
name: 'Part2'
}
],
} }
}, },
components:{ components:{
audiology, audiology,
reading, reading,
slander,
compose compose
}, },
created() {
this.getList()
},
methods: { methods: {
upType(index, num) { upType(index, num) {
this.listType.splice(index, 1, num) this.listType.splice(index, 1, num)
@ -94,16 +176,6 @@
change(index) { change(index) {
this.current = index; this.current = index;
}, },
//写作接口
// getCompose() {
// this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list').then(res => {
// this.Compose = res.data
// console.log(this.Compose)
// for (let i = 0; i < res.data.length; i++) {
// this.listType.push(1)
// }
// })
// },
// 选中某个单选框时，由radio时触发 // 选中某个单选框时，由radio时触发
radioCheck(index) { radioCheck(index) {
if (this.radioValue == this.list2[index].id) { if (this.radioValue == this.list2[index].id) {
@ -121,6 +193,43 @@
this.search = false this.search = false
} }
}, },
getList() {
this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', this.postdata).then(res => {
let keyArr = Object.keys(res.data)
let valueArr = Object.values(res.data)
this.slander = keyArr.map((item, index) => {
return {
label: item,
list: valueArr[index]
}
})
})
},
//下拉显示下拉框
arrow_xl() {
this.arrow = !this.arrow
},
arrow_xl2() {
this.arrowDown = !this.arrowDown
},
arrow_options(id) {
this.options.forEach(item => {
if (item.id == id) {
this.selectedOption = item.name
} else if (id == 2) {
this.postdata.part = "part2"
this.part2=true
this.grizzly = false
this.getList()
} else {
this.postdata.part = "part1"
this.part2= false
this.grizzly = true
this.getList()
}
})
},
radioGroupChange() { radioGroupChange() {
} }
@ -136,7 +245,6 @@
.view_body { .view_body {
height: 89vh; height: 89vh;
overflow-y: auto;
width: 91.3%; width: 91.3%;
margin: 0 auto; margin: 0 auto;
border-radius: 0rpx 0rpx 0rpx 0rpx; border-radius: 0rpx 0rpx 0rpx 0rpx;
@ -295,17 +403,132 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden overflow: hidden
} }
.view_left {
display: flex;
justify-content: left;
margin-top: 20rpx;
}
.view_inuygs {
display: flex;
justify-content: space-between;
align-items: center;
}
.view_left_pd {
position: relative;
padding: 12rpx 32rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 15rpx;
font-size: 24rpx;
color: #072F5A;
}
.unite {
font-size: 28rpx;
font-family: 'PingFang';
font-weight: 800;
color: #2E4975;
margin-right: 20rpx;
}
.pull_Down {
position: absolute;
bottom: -130rpx;
left: 50%;
margin-left: -79rpx;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 20rpx 20rpx 20rpx 20rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #F2F2F2;
view {
padding: 15rpx 50rpx;
border-bottom: 2rpx solid #F2F2F2;
}
}
.pull_Down view:last-child {
border: none;
}
.header_part {
display: flex;
align-items: center;
margin: 26rpx 0rpx;
}
.slander_an {
padding: 6rpx 18rpx;
background: #fff;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin-left: 12rpx;
color: #65748C;
}
.slander_for {
background-color: #fff;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.slander_of {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 0;
margin: 0 20rpx;
border-bottom: 2rpx solid #F2F2F2;
}
.textual {
width: 290rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.bottom_one {
display: flex;
view {
padding: 6rpx 18rpx;
background: #F4F4F4;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-size: 20rpx;
font-weight: 500;
color: rgba(101,116,140,0.8);
margin-left: 15rpx;
}
.blue {
background: rgba(45, 124, 230, 0.1);
color: #2D7CE6;
}
}
.pull_down{
display: flex;
justify-content: space-between;
width: 100rpx;
font-size: 24rpx;
}
} }
.footer { .footer {
position: fixed;
bottom: 0;
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
padding: 30rpx 32rpx; padding: 30rpx 32rpx;
} }
.footer2{ .footer2{
position: fixed;
bottom: 0;
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);