@@ -39,9 +39,9 @@ export function personBGIListApi(pageNum, pageSize, videoType) { | |||||
* @param sex ,pageNum,pageSize | * @param sex ,pageNum,pageSize | ||||
* @returns data | * @returns data | ||||
*/ | */ | ||||
export function systemSCIListApi(sex, pageNum, pageSize) { | |||||
export function systemSCIListApi(pageNum, pageSize) { | |||||
return request({ | return request({ | ||||
url: `/api/personPatch/list?sex=${sex}&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
method: 'get' | method: 'get' | ||||
}) | }) | ||||
} | } | ||||
@@ -52,7 +52,7 @@ export function systemSCIListApi(sex, pageNum, pageSize) { | |||||
*/ | */ | ||||
export function personSCIListApi(pageNum, pageSize, videoType) { | export function personSCIListApi(pageNum, pageSize, videoType) { | ||||
return request({ | return request({ | ||||
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
method: 'get', | method: 'get', | ||||
}) | }) | ||||
} | } | ||||
@@ -5,17 +5,17 @@ export const Layout = () => import("@/layout/index.vue"); | |||||
// 静态路由 | // 静态路由 | ||||
export const constantRoutes: RouteRecordRaw[] = [ | export const constantRoutes: RouteRecordRaw[] = [ | ||||
{ | |||||
path: "/redirect", | |||||
component: Layout, | |||||
meta: { hidden: true }, | |||||
children: [ | |||||
{ | |||||
path: "/redirect/:path(.*)", | |||||
component: () => import("@/views/redirect/index.vue"), | |||||
}, | |||||
], | |||||
}, | |||||
// { | |||||
// path: "/redirect", | |||||
// component: Layout, | |||||
// meta: { hidden: true }, | |||||
// children: [ | |||||
// { | |||||
// path: "/redirect/:path(.*)", | |||||
// component: () => import("@/views/redirect/index.vue"), | |||||
// }, | |||||
// ], | |||||
// }, | |||||
// 登录 | // 登录 | ||||
{ | { | ||||
path: "/login", | path: "/login", | ||||
@@ -82,13 +82,13 @@ p { | |||||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||||
width: 8px; | width: 8px; | ||||
/* 滚动条宽度 */ | /* 滚动条宽度 */ | ||||
background-color: #f5f5f5; | |||||
// background-color: #f5f5f5; | |||||
/* 滚动条背景色 */ | /* 滚动条背景色 */ | ||||
} | } | ||||
/* 定义滚动条轨道的样式 */ | /* 定义滚动条轨道的样式 */ | ||||
::-webkit-scrollbar-track { | ::-webkit-scrollbar-track { | ||||
background-color: #f5f5f5; | |||||
// background-color: #f5f5f5; | |||||
/* 滚动条轨道背景色 */ | /* 滚动条轨道背景色 */ | ||||
} | } | ||||
@@ -2,6 +2,7 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
@@ -8,14 +8,9 @@ export {} | |||||
declare module '@vue/runtime-core' { | declare module '@vue/runtime-core' { | ||||
export interface GlobalComponents { | export interface GlobalComponents { | ||||
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | ||||
ElAlert: typeof import('element-plus/es')['ElAlert'] | |||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] | |||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] | |||||
ElButton: typeof import('element-plus/es')['ElButton'] | ElButton: typeof import('element-plus/es')['ElButton'] | ||||
ElCard: typeof import('element-plus/es')['ElCard'] | |||||
ElCol: typeof import('element-plus/es')['ElCol'] | ElCol: typeof import('element-plus/es')['ElCol'] | ||||
ElDialog: typeof import('element-plus/es')['ElDialog'] | ElDialog: typeof import('element-plus/es')['ElDialog'] | ||||
ElDivider: typeof import('element-plus/es')['ElDivider'] | |||||
ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | ||||
@@ -23,59 +18,27 @@ declare module '@vue/runtime-core' { | |||||
ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ||||
ElIcon: typeof import('element-plus/es')['ElIcon'] | ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
ElInput: typeof import('element-plus/es')['ElInput'] | ElInput: typeof import('element-plus/es')['ElInput'] | ||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] | |||||
ElLink: typeof import('element-plus/es')['ElLink'] | |||||
ElOption: typeof import('element-plus/es')['ElOption'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
ElPagination: typeof import('element-plus/es')['ElPagination'] | ElPagination: typeof import('element-plus/es')['ElPagination'] | ||||
ElPopover: typeof import('element-plus/es')['ElPopover'] | |||||
ElRadio: typeof import('element-plus/es')['ElRadio'] | |||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] | |||||
ElRow: typeof import('element-plus/es')['ElRow'] | ElRow: typeof import('element-plus/es')['ElRow'] | ||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | |||||
ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
ElSwitch: typeof import('element-plus/es')['ElSwitch'] | |||||
ElTable: typeof import('element-plus/es')['ElTable'] | |||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] | |||||
ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
ElTabs: typeof import('element-plus/es')['ElTabs'] | ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
ElTag: typeof import('element-plus/es')['ElTag'] | |||||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | |||||
ElTree: typeof import('element-plus/es')['ElTree'] | |||||
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] | |||||
ElUpload: typeof import('element-plus/es')['ElUpload'] | |||||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default'] | |||||
IEpCaretTop: typeof import('~icons/ep/caret-top')['default'] | |||||
IEpClose: typeof import('~icons/ep/close')['default'] | |||||
IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] | ||||
IEpCollection: typeof import('~icons/ep/collection')['default'] | |||||
IEpDelete: typeof import('~icons/ep/delete')['default'] | IEpDelete: typeof import('~icons/ep/delete')['default'] | ||||
IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] | |||||
IEpDownload: typeof import('~icons/ep/download')['default'] | IEpDownload: typeof import('~icons/ep/download')['default'] | ||||
IEpEdit: typeof import('~icons/ep/edit')['default'] | IEpEdit: typeof import('~icons/ep/edit')['default'] | ||||
IEpGoods: typeof import('~icons/ep/goods')['default'] | |||||
IEpHeadset: typeof import('~icons/ep/headset')['default'] | |||||
IEpLoading: typeof import('~icons/ep/loading')['default'] | IEpLoading: typeof import('~icons/ep/loading')['default'] | ||||
IEpMenu: typeof import('~icons/ep/menu')['default'] | |||||
IEpMic: typeof import('~icons/ep/mic')['default'] | |||||
IEpPlus: typeof import('~icons/ep/plus')['default'] | |||||
IEpPosition: typeof import('~icons/ep/position')['default'] | |||||
IEpRefresh: typeof import('~icons/ep/refresh')['default'] | |||||
IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default'] | |||||
IEpSearch: typeof import('~icons/ep/search')['default'] | IEpSearch: typeof import('~icons/ep/search')['default'] | ||||
IEpSetting: typeof import('~icons/ep/setting')['default'] | |||||
IEpTop: typeof import('~icons/ep/top')['default'] | |||||
IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default'] | |||||
IEpVideoCamera: typeof import('~icons/ep/video-camera')['default'] | |||||
IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | ||||
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | ||||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | ||||
MyLoading: typeof import('./../components/myLoading.vue')['default'] | MyLoading: typeof import('./../components/myLoading.vue')['default'] | ||||
MyLoadingIcon: typeof import('./../components/myLoadingIcon.vue')['default'] | MyLoadingIcon: typeof import('./../components/myLoadingIcon.vue')['default'] | ||||
Pagination: typeof import('./../components/Pagination/index.vue')['default'] | Pagination: typeof import('./../components/Pagination/index.vue')['default'] | ||||
RightPanel: typeof import('./../components/RightPanel/index.vue')['default'] | |||||
RouterLink: typeof import('vue-router')['RouterLink'] | RouterLink: typeof import('vue-router')['RouterLink'] | ||||
RouterView: typeof import('vue-router')['RouterView'] | RouterView: typeof import('vue-router')['RouterView'] | ||||
SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] | SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] | ||||
@@ -85,6 +48,5 @@ declare module '@vue/runtime-core' { | |||||
} | } | ||||
export interface ComponentCustomProperties { | export interface ComponentCustomProperties { | ||||
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] | ||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | |||||
} | } | ||||
} | } |
@@ -53,6 +53,7 @@ | |||||
:infinite-scroll-disabled="overLoadModel" | :infinite-scroll-disabled="overLoadModel" | ||||
> | > | ||||
<div | <div | ||||
:class="modelId == item.id ? 'modeListBoxItmeActive' : ''" | |||||
class="modeListBoxItme" | class="modeListBoxItme" | ||||
v-for="item in modeList" | v-for="item in modeList" | ||||
:key="item.id" | :key="item.id" | ||||
@@ -107,8 +108,8 @@ | |||||
字幕 | 字幕 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 文案 --> | |||||
<div v-show="tabItemActive == 1" class="tabContent tab1"> | |||||
<!-- 文案 只能使用v-if,不能使用v-show--> | |||||
<div v-if="tabItemActive == 1" class="tabContent tab1"> | |||||
<!-- 标题 --> | <!-- 标题 --> | ||||
<div class="title"> | <div class="title"> | ||||
<el-input | <el-input | ||||
@@ -193,7 +194,7 @@ | |||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
<!-- 背景 --> | <!-- 背景 --> | ||||
<div v-show="tabItemActive == 2" class="tabContent tab2"> | |||||
<div v-if="tabItemActive == 2" class="tabContent tab2"> | |||||
<div class="tab"> | <div class="tab"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
@@ -216,13 +217,17 @@ | |||||
v-infinite-scroll="loadMoreSystemBGI" | v-infinite-scroll="loadMoreSystemBGI" | ||||
:infinite-scroll-disabled="overLoadSystemBG" | :infinite-scroll-disabled="overLoadSystemBG" | ||||
> | > | ||||
<div class="bjSystemBoxItem" v-for="item in 15" :key="item"> | |||||
<img class="boxCentreImg" src="" alt="" /> | |||||
<div | |||||
class="bjSystemBoxItem" | |||||
v-for="item in systemBGIList" | |||||
:key="item.id" | |||||
> | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 素材 --> | <!-- 素材 --> | ||||
<div v-show="tabItemActive == 3" class="tabContent"> | |||||
<div v-if="tabItemActive == 3" class="tabContent tab3"> | |||||
<div class="tab"> | <div class="tab"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
@@ -239,9 +244,23 @@ | |||||
个人素材 | 个人素材 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 素材图片展示 --> | |||||
<div | |||||
class="bjSystemBox" | |||||
v-infinite-scroll="loadMoreSystemSCI" | |||||
:infinite-scroll-disabled="overLoadSystemSC" | |||||
> | |||||
<div | |||||
class="bjSystemBoxItem" | |||||
v-for="item in systemSCIList" | |||||
:key="item.id" | |||||
> | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 字幕 --> | <!-- 字幕 --> | ||||
<div v-show="tabItemActive == 4" class="tabContent"></div> | |||||
<div v-if="tabItemActive == 4" class="tabContent"></div> | |||||
</div> | </div> | ||||
<!-- 试听的mp3 --> | <!-- 试听的mp3 --> | ||||
<div style="opacity: 0; width: 0"> | <div style="opacity: 0; width: 0"> | ||||
@@ -285,6 +304,7 @@ const modelTabItemActive = ref(0); //模版tab栏 | |||||
const modelPageNum = ref(1); | const modelPageNum = ref(1); | ||||
const modelPageSize = ref(20); | const modelPageSize = ref(20); | ||||
const overLoadModel = ref(true); //禁用模版加载更多 | const overLoadModel = ref(true); //禁用模版加载更多 | ||||
const modelId = ref(null); // 选中模版的id | |||||
// 获取模版列表 | // 获取模版列表 | ||||
async function getModeList(sex, pageNum, pageSize) { | async function getModeList(sex, pageNum, pageSize) { | ||||
const res = await modeListApi(sex, pageNum, pageSize); | const res = await modeListApi(sex, pageNum, pageSize); | ||||
@@ -296,6 +316,7 @@ function clickModelItem(item) { | |||||
modelImg.value = item.coverImg; | modelImg.value = item.coverImg; | ||||
showChooseModel.value = false; | showChooseModel.value = false; | ||||
videoType.value = item.videoType; | videoType.value = item.videoType; | ||||
modelId.value = item.id; | |||||
} | } | ||||
// tab栏切换 | // tab栏切换 | ||||
function changeTabSex(index) { | function changeTabSex(index) { | ||||
@@ -464,7 +485,6 @@ async function loadMoreSystemBGI() { | |||||
watch( | watch( | ||||
() => videoType, | () => videoType, | ||||
(newValue, oldValue) => { | (newValue, oldValue) => { | ||||
console.log(123); | |||||
systemBGPageNum.value = 1; | systemBGPageNum.value = 1; | ||||
getSystemBGIList(); | getSystemBGIList(); | ||||
}, | }, | ||||
@@ -484,7 +504,7 @@ async function getpersonBGIList() { | |||||
overLoadpersonBG.value = false; | overLoadpersonBG.value = false; | ||||
} | } | ||||
// 加载更多系统背景图 | // 加载更多系统背景图 | ||||
async function loadMorepersonBGI() { | |||||
async function loadMorePersonBGI() { | |||||
personBGPageNum.value += 1; | personBGPageNum.value += 1; | ||||
const res = await personBGIListApi( | const res = await personBGIListApi( | ||||
personBGPageNum.value, | personBGPageNum.value, | ||||
@@ -500,7 +520,61 @@ async function loadMorepersonBGI() { | |||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
//#region 素材 | //#region 素材 | ||||
const scTabItemActive = ref(1); | |||||
const scTabItemActive = ref(1); //系统或个人tab高亮 | |||||
const systemSCIList = ref([]); //系统素材列表 | |||||
const systemSCPageNum = ref(1); //系统素材页数 | |||||
const overLoadSystemSC = ref(true); | |||||
async function getSystemSCIList() { | |||||
const res = await systemSCIListApi( | |||||
systemSCPageNum.value, | |||||
20, | |||||
videoType.value | |||||
); | |||||
systemSCIList.value = res.data.list; | |||||
overLoadSystemSC.value = false; | |||||
} | |||||
// 加载更多系统素材图 | |||||
async function loadMoreSystemSCI() { | |||||
systemSCPageNum.value += 1; | |||||
const res = await systemSCIListApi( | |||||
systemSCPageNum.value, | |||||
20, | |||||
videoType.value | |||||
); | |||||
systemSCIList.value.push(...res.data.list); | |||||
if (res.data.list.length == 0) { | |||||
overLoadSystemSC.value = true; | |||||
systemSCPageNum.value = modelPageNum.value - 1; | |||||
} | |||||
} | |||||
// 个人素材 | |||||
const personSCIList = ref([]); //系统素材列表 | |||||
const personSCPageNum = ref(1); //系统素材页数 | |||||
const overLoadpersonSC = ref(true); | |||||
async function getpersonSCIList() { | |||||
const res = await personSCIListApi( | |||||
personSCPageNum.value, | |||||
20, | |||||
videoType.value | |||||
); | |||||
personSCIList.value = res.data.list; | |||||
overLoadpersonSC.value = false; | |||||
} | |||||
// 加载更多个人素材图 | |||||
async function loadMorePersonSCI() { | |||||
personSCPageNum.value += 1; | |||||
const res = await personSCIListApi( | |||||
personSCPageNum.value, | |||||
20, | |||||
videoType.value | |||||
); | |||||
personSCIList.value.push(...res.data.list); | |||||
if (res.data.list.length == 0) { | |||||
overLoadpersonSC.value = true; | |||||
personSCPageNum.value = modelPageNum.value - 1; | |||||
} | |||||
} | |||||
//#endregion ---------------------------- | //#endregion ---------------------------- | ||||
//#region | //#region | ||||
@@ -522,6 +596,7 @@ const t = globalProperties.$t(string); | |||||
onMounted(async () => { | onMounted(async () => { | ||||
voiceTotal(); | voiceTotal(); | ||||
getSystemSCIList(); | |||||
await getModeList("", 1, 20); | await getModeList("", 1, 20); | ||||
}); | }); | ||||
</script> | </script> | ||||
@@ -612,9 +687,10 @@ onMounted(async () => { | |||||
padding: 20px; | padding: 20px; | ||||
width: 300px; | width: 300px; | ||||
height: 300px; | height: 300px; | ||||
background-color: rgba(0, 0, 0, 0.1); | |||||
background: rgba(0, 0, 0, 0.1); | |||||
margin: 0 10px 10px 0; | margin: 0 10px 10px 0; | ||||
border-radius: 15px; | border-radius: 15px; | ||||
z-index: 2; | |||||
cursor: pointer; | cursor: pointer; | ||||
img { | img { | ||||
max-width: 100%; | max-width: 100%; | ||||
@@ -623,6 +699,23 @@ onMounted(async () => { | |||||
// max-height: 200px; | // max-height: 200px; | ||||
} | } | ||||
} | } | ||||
.modeListBoxItmeActive { | |||||
border: 3px solid #7264f5; | |||||
// &::before { | |||||
// content: ""; | |||||
// position: absolute; | |||||
// top: -5px; | |||||
// left: -5px; | |||||
// width: 310px; | |||||
// height: 310px; | |||||
// background: linear-gradient( | |||||
// 225deg, | |||||
// rgba(81, 217, 202, 1), | |||||
// rgba(114, 100, 245, 1) | |||||
// ); | |||||
// border-radius: 16px; | |||||
// } | |||||
} | |||||
} | } | ||||
} | } | ||||
.noModel { | .noModel { | ||||
@@ -740,20 +833,28 @@ onMounted(async () => { | |||||
margin: 7px 0; | margin: 7px 0; | ||||
} | } | ||||
} | } | ||||
.tab2 { | |||||
.tab2, | |||||
.tab3 { | |||||
.bjSystemBox { | .bjSystemBox { | ||||
display: flex; | display: flex; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
height: calc(100% - 60px); | |||||
max-height: calc(100% - 60px); | |||||
overflow-y: scroll; | overflow-y: scroll; | ||||
background-color: pink; | |||||
// background-color: pink; | |||||
.bjSystemBoxItem { | .bjSystemBoxItem { | ||||
position: relative; | position: relative; | ||||
margin-right: 3%; | margin-right: 3%; | ||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
width: 30%; | width: 30%; | ||||
height: 200px; | height: 200px; | ||||
background-color: red; | |||||
background-color: #e5e5e5; | |||||
border-radius: 10px; | |||||
cursor: pointer; | |||||
img { | |||||
padding: 10px; | |||||
max-width: 100%; | |||||
max-height: 100%; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||