2023-10-20

This commit is contained in:
2023-10-20 17:21:45 +08:00
parent 12ef707f64
commit bd9dabd21d
29 changed files with 1401 additions and 385 deletions

View File

@@ -299,52 +299,57 @@ export default defineComponent({
file.status = 'done'
this.fileList.push(file)
setTimeout(async ()=>{
const img = new Image();
let colorImage = this.$refs.colorImage
img.src = colorImage[0].src;
const colorThief = new ColorThief();
let colorImage = this.$refs.colorImage
let domImg = colorImage[0];
// let color = colorThief.getColor(domImg)
let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,9)
//排序
let obj = {
max : 5,
min: 5,
}
let colorSort
await GO.setColor(selectColor,file.imgUrl,obj).then(
(rv) => {
if(rv){
colorSort = rv.ratio
}
img.onload = async () => {
let domImg = colorImage[0];
// let color = colorThief.getColor(domImg)
let selectColorList = [];
let selectColor = colorThief.getPalette(img,9)
//排序
let obj = {
max : 5,
min: 5,
}
)
colorSort.sort((a, b) => {
var a_num = a.ratio;
var b_num = b.ratio;
return b_num - a_num;
});
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
let colorSort
await GO.setColor(selectColor,file.imgUrl,obj).then(
(rv) => {
if(rv){
colorSort = rv.ratio
}
}
)
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
colorSort.sort((a, b) => {
var a_num = a.ratio;
var b_num = b.ratio;
return b_num - a_num;
});
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
)
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
};
},100)
};
// 转化为base64S
@@ -667,7 +672,7 @@ export default defineComponent({
width: auto;
background: #f0eaee;
border-radius: 10px;
border-radius: 1rem;
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3);

View File

@@ -55,13 +55,13 @@
</div>
</div>
</div>
<div class="cut_picture_review_item">
<!-- <div class="cut_picture_review_item">
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" >
<img class="previews_image" :style="previews.img" :src="previews.url">
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -280,7 +280,8 @@ export default defineComponent({
}
.cut_picture_right{
width: 39.2rem;
// width: 39.2rem;
width: 52rem;
height: 100%;
background: #fff;
border-radius: 2rem;
@@ -309,7 +310,8 @@ export default defineComponent({
.cut_picture_review_item{
width: 100%;
height: 50%;
// height: 50%;
height: 100%;
position: relative;
.cut_picture_review_content{
@@ -317,7 +319,7 @@ export default defineComponent({
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.45) translate(-50%, -50%);
transform: scale(0.8) translate(-50%, -50%);
background: rgba(91,94,105,0.8);
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
border-radius: 1rem;

View File

@@ -39,14 +39,18 @@
</ul>
</div>
</div>
<div v-else class="input_box">
<div v-else class="input_box" :class="{active:inputShow}">
<input
class="search_input"
@input="ifMaximumLength"
placeholder="Promopt input"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
/>
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
<div class="upload_item">
@@ -179,7 +183,7 @@ import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import { forEach } from "jszip";
export default defineComponent({
props: ["msg"],
props: ["msg",'sketchCatecoryList'],
setup() {
// console.log(prop.msg);
let checkbox = ref([
@@ -219,10 +223,12 @@ export default defineComponent({
num:1,
optype:false,
})
let sketchCatecoryList:any = ref([])
// let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
return {
imgList,
selectImgList,
@@ -244,8 +250,10 @@ export default defineComponent({
checkboxImage,
printModel,
loadingShow,
sketchCatecoryList,
workspace
// sketchCatecoryList,
workspace,
inputShow,
inputTime,
};
},
data(prop) {
@@ -281,6 +289,7 @@ export default defineComponent({
// this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
this.workspace = this.store.state.Workspace.workspace
},
computed: {
getSketchLabel(value: any) {
@@ -347,6 +356,20 @@ export default defineComponent({
);
return
}
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{
message.warning(
"Please enter content"
);
return
}
let data = {
generateType:'text',
designType:'',
@@ -356,6 +379,7 @@ export default defineComponent({
text:this.searchPictureName,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:this.printModel.num,//为1就是Print
gender:'',
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
@@ -378,6 +402,21 @@ export default defineComponent({
this.loadingShow = false
});
},
ifMaximumLength(e){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
if(this.searchPictureName.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
fileUploadChange(data: any) {
let file = data.file;
if (file.status === "done") {
@@ -387,7 +426,7 @@ export default defineComponent({
file.resData = res.data;
file.type_ = "upload";
file.id_ = GO.id++;
file.category = this.sketchCatecoryList[0].value;
file.category = this.sketchCatecoryList?.[0]?.value;
let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done"
);
@@ -509,7 +548,7 @@ export default defineComponent({
.generate {
flex: 1;
// height: 30rem;
overflow-x: hidden;
// overflow-x: hidden;
border-right: 1px solid #e5e5e5;
&.generate::-webkit-scrollbar {
display: none;
@@ -622,20 +661,20 @@ export default defineComponent({
}
.upload_item {
.upload_file_item {
&.active {
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
transform: scale(0.9);
.delete_file_block{
pointer-events:none;
}
.operate_file_block{
pointer-events:none;
}
img {
}
}
// &.active {
// opacity: 0.5;
// // border: 2px solid;
// border-radius: 1rem;
// transform: scale(0.9);
// .delete_file_block{
// pointer-events:none;
// }
// .operate_file_block{
// pointer-events:none;
// }
// img {
// }
// }
&.forbidden{
cursor:not-allowed;
img{

View File

@@ -86,7 +86,7 @@ import { useStore } from "vuex";
import GO from '@/tool/GO';
export default defineComponent({
props: ["msg"],
props: ["msg",'disignTypeList'],
setup(prop) {
let myMaterialModalShow = ref(false)
let imgList = ref([
@@ -99,9 +99,9 @@ export default defineComponent({
let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null)
let disignTypeList:any = ref([
// let disignTypeList:any = ref([
])
// ])
let workspace:any = ref({})
return{
myMaterialModalShow,
@@ -114,7 +114,7 @@ export default defineComponent({
total,
searcMaterialhName,
designType,
disignTypeList,
// disignTypeList,
workspace
}
},
@@ -261,7 +261,6 @@ export default defineComponent({
})
this.store.commit("addGenerateMaterialFils", imgData);
},
//改变页码
changePage(current: number, pageSize: number){
this.currentPage = current

View File

@@ -34,7 +34,7 @@
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
@@ -58,6 +58,7 @@
class="upload_file_item upload_component"
v-show="moodboarList.length < 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
@@ -65,8 +66,8 @@
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
:before-upload="beforeUpload"
v-model:file-list="fileList"
multiple
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@@ -160,6 +161,7 @@ export default defineComponent({
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
@@ -171,8 +173,10 @@ export default defineComponent({
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
let uploading:any = ref([])
return {
fileList,
showFileList,
lessenList,
templateModal,
templateFileList,
@@ -182,7 +186,8 @@ export default defineComponent({
layoutList,
layoutOpen,
loadingShow,
modalImg
modalImg,
uploading
};
},
data() {
@@ -223,8 +228,16 @@ export default defineComponent({
watch:{
fileList:{
handler(newVal:any,oldVal:any){
console.log(newVal,oldVal);
// console.log(111);
// if(this.uploading.length<newVal.length){
// for (let index = 1; this.uploading.length < newVal.length; index++) {
// this.uploading.push(false)
// }
// }else{
// if(newVal[newVal.length-1].status == 'dome')
// this.uploading[this.uploading-1] = true
// }
}
}
},
@@ -283,6 +296,7 @@ export default defineComponent({
}else{
this.store.commit("setMoodboardFile", fileList);
}
// this.showFileList = this.fileList
} else if (file.status === "error") {
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
@@ -295,6 +309,7 @@ export default defineComponent({
}
message.error(file.name + "upload failed");
}
},
beforeUpload(file: any) {
const isJpgOrPng =
@@ -351,6 +366,8 @@ export default defineComponent({
material:[] as any,
moodboard:[] as any,
}
console.log(disposeMoodboard);
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
@@ -360,7 +377,6 @@ export default defineComponent({
setboard.moodboard.push(v)
}
})
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
@@ -547,12 +563,15 @@ export default defineComponent({
.modal_img_item{
width: 4rem;
height: 4rem;
text-align: center;
margin: 0 1rem 1rem 0;
position: relative;
cursor: pointer;
img{
width: 100%;
width: auto;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.checked{
position: absolute;

View File

@@ -99,9 +99,10 @@
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
@@ -151,10 +152,10 @@ export default defineComponent({
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
let openClick: any = ref(1);
let generateCheckbox:any = ref()
let generateList:any = ref([
])
let generateList:any = ref([])
let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
return {
fileList,
printImgList,
@@ -163,6 +164,8 @@ export default defineComponent({
generateCheckbox,
generateList,
loadingShow,
inputShow,
inputTime,
}
},
computed:{
@@ -572,6 +575,16 @@ export default defineComponent({
getgenerateCheckbox(value:any){
this.generateCheckbox = value
},
ifMaximumLength(){
clearTimeout(this.inputTime)
this.inputTime = setTimeout(()=>{
if(this.captionGeneration.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
getgenerate(){
let generage:any = this.$refs.Generate
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
@@ -583,10 +596,12 @@ export default defineComponent({
level2Type:'',
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:2,//为1就是Print
version:generage.printModel.num,//为1就是Print
gender:'',
}
if(generateType == 'image'||generateType == 'text-image'){
if(generage.collectionElementid){
}else{
message.warning(
"Please select a picture"
@@ -598,6 +613,14 @@ export default defineComponent({
data.level2Type = ''
// this.beforeUpload(false)
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{
message.warning(
"Please enter content"
@@ -732,12 +755,17 @@ export default defineComponent({
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
text-align: center;
img{
width: 100%;
width: auto;
object-fit: cover;
height: 100%;
max-width: 100%;
}
.upload_file_img_block{
height: 100%;
}
&.upload_component{
border: none;
@@ -779,7 +807,9 @@ export default defineComponent({
.upload_img{
display: block;
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: cover;
}
&:hover .delete_like_file_block{
display: block;
@@ -847,9 +877,12 @@ export default defineComponent({
margin: 0 1rem 1rem 0;
position: relative;
cursor: pointer;
text-align: center;
img{
width: 100%;
width: auto;
height: 100%;
object-fit: cover;
max-width: 100%;
}
.checked{
position: absolute;
@@ -875,7 +908,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
flex: 1;
overflow-x: hidden;
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
@@ -904,8 +937,9 @@ export default defineComponent({
cursor: pointer;
img{
object-fit: cover;
width: 100%;
height: 100%;
max-width: 100%;
width: auto;
}
&:hover .delete_like_file_block{
display: block;

View File

@@ -129,7 +129,7 @@ export default defineComponent({
this.createTimer()
},
getBloodBars(){
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this.userInfo.userId}}).then((rv: any) => {
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this?.userInfo?.userId}}).then((rv: any) => {
if (rv) {
this.bloodBars = rv*100
}
@@ -175,7 +175,7 @@ export default defineComponent({
// sessionStorage.removeItem
let a = true
let data = {
"user_id" : this.userInfo.userId,
"user_id" : this.userInfo?.userId,
"session_id":sessionId,
"message" : this.chatCentent,
}
@@ -221,7 +221,7 @@ export default defineComponent({
likeFile(item:any,imgIndex:number,index:number){
let data = {
...item,
"userId" : this.userInfo.userId,
"userId" : this.userInfo?.userId,
}
Https.axiosPost(Https.httpUrls.pictureLikeOrUnLike, data).then(
(rv) => {
@@ -401,7 +401,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
padding: .5rem 1rem;
background: #fff;
border-radius: 5px;
// height: 32px;

View File

@@ -145,11 +145,13 @@
ref="Material"
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:sketchCatecoryList="sketchCatecoryList"
@generateCheckbox="getgenerateCheckbox"
></Generate>
</div>
@@ -169,9 +171,10 @@
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
@@ -267,6 +270,9 @@ export default defineComponent({
let sketchCatecoryList:any = ref({})
let workspace:any = ref({})
let inputShow = ref(false)
let inputTime = ref()
return {
fileList,
openClick,
@@ -274,7 +280,9 @@ export default defineComponent({
generateCheckbox,
loadingShow,
sketchCatecoryList,
workspace
workspace,
inputShow,
inputTime,
};
},
data() {
@@ -346,7 +354,6 @@ export default defineComponent({
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
@@ -357,9 +364,6 @@ export default defineComponent({
}
arr.push(obj)
});
(this.$refs.Generate as any).sketchCatecoryList = arr
(this.$refs.Material as any).disignTypeList = arr
this.sketchCatecoryList = arr
}
})
@@ -374,7 +378,7 @@ export default defineComponent({
file.imgUrl = res.data.url;
file.resData = res.data;
file.pin = false;
file.category = this.sketchCatecoryList[0].value;
file.category = this.sketchCatecoryList?.[0]?.value;
file.categoryShow = false;
file.id_ = GO.id++
file.type_ = {
@@ -450,6 +454,21 @@ export default defineComponent({
document.removeEventListener("click", this.hiddenFileCategory);
},
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
if(this.captionGeneration.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
this.store.commit("addGenerateMaterialFils", item);
@@ -541,9 +560,7 @@ export default defineComponent({
},
//发送请求生成图片
getgenerate(){
let generage:any = this.$refs.Generate
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
let data = {
generateType:generateType,
@@ -553,7 +570,8 @@ export default defineComponent({
level2Type:generage.level2Type,
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:0,//为1就是Print
version:generage.printModel.num,//为1就是Print
gender:this.workspace.sex,
}
if(generateType == 'image'||generateType == 'text-image'){
if(generage.collectionElementid){
@@ -568,6 +586,13 @@ export default defineComponent({
data.collectionElementId = ''
data.level2Type = ''
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{
message.warning(
"Please enter content"
@@ -845,7 +870,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
flex: 1;
overflow-x: hidden;
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}

View File

@@ -7,6 +7,7 @@
:maskClosable="false"
:centered="true"
:closable="false"
wrapClassName="#app"
>
<div class="collection_title">
<div class="collection_title_text">
@@ -17,8 +18,8 @@
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
<div class="collection_title_text_intro">select moodboard for your collection</div>
</div>
<div>
<a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
<div class="collection_progress">
<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
</div>
</div>
@@ -163,6 +164,18 @@ export default defineComponent({
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_progress{
width: 8rem;
height: 8rem;
>div{
width: 100% !important;
height: 100% !important;
:deep(.ant-progress-inner){
width: 100% !important;
height: 100% !important;
}
}
}
.collection_title_text{
margin-right: 4rem;
}
@@ -264,7 +277,7 @@ export default defineComponent({
// max-width: 1200px ;
// max-width: 1150px ;
.ant-modal-content{
border-radius: 10px;
border-radius: 1rem;
overflow: hidden;
.ant-modal-header{
background-color: #fff;
@@ -282,7 +295,12 @@ export default defineComponent({
}
.ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55);
font-size: 1.6rem;
}
}
}
// .ant-progress-circle .ant-progress-inner{
// width: 8rem !important;
// height: 8rem !important;
// }
</style>