|
|
@@ -26,8 +26,8 @@ |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" |
|
|
|
|
|
@click="changeTabSex(0)" |
|
|
|
|
|
|
|
|
:class="modelTabItemActive == -1 ? 'tabItemActive' : ''" |
|
|
|
|
|
@click="changeTabSex(-1)" |
|
|
> |
|
|
> |
|
|
{{ $t("createVideo.all") }} |
|
|
{{ $t("createVideo.all") }} |
|
|
</div> |
|
|
</div> |
|
|
@@ -50,8 +50,8 @@ |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" |
|
|
|
|
|
@click="changeTabVideoType(0)" |
|
|
|
|
|
|
|
|
:class="modelTabItemActive2 == -1 ? 'tabItemActive' : ''" |
|
|
|
|
|
@click="changeTabVideoType(-1)" |
|
|
> |
|
|
> |
|
|
{{ $t("createVideo.all") }} |
|
|
{{ $t("createVideo.all") }} |
|
|
</div> |
|
|
</div> |
|
|
@@ -90,7 +90,16 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 展示区 --> |
|
|
<!-- 展示区 --> |
|
|
<div class="showModelImgBox"> |
|
|
<div class="showModelImgBox"> |
|
|
<img :src="modelImg" alt="" /> |
|
|
|
|
|
|
|
|
<!-- <img :src="modelImg" alt="" /> --> |
|
|
|
|
|
<!-- 编辑图片位置组件 --> |
|
|
|
|
|
<EditPosition |
|
|
|
|
|
id="editPosition" |
|
|
|
|
|
class="EditPosition" |
|
|
|
|
|
:materialList="materialList" |
|
|
|
|
|
:videoType="videoType" |
|
|
|
|
|
:proportion="proportion" |
|
|
|
|
|
> |
|
|
|
|
|
</EditPosition> |
|
|
<!-- 保存视频和生成视频 --> |
|
|
<!-- 保存视频和生成视频 --> |
|
|
<div class="btnBox" v-show="!showChooseModel"> |
|
|
<div class="btnBox" v-show="!showChooseModel"> |
|
|
<div class="customBtn" style="margin-right: 15px"> |
|
|
<div class="customBtn" style="margin-right: 15px"> |
|
|
@@ -264,6 +273,8 @@ |
|
|
class="bjSystemBoxItem" |
|
|
class="bjSystemBoxItem" |
|
|
v-for="item in systemBGIList" |
|
|
v-for="item in systemBGIList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
|
|
|
:class="bjImgActive == item.id ? 'ImgBorderActive' : ''" |
|
|
|
|
|
@click="selectBjImg(item)" |
|
|
> |
|
|
> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
@@ -293,7 +304,16 @@ |
|
|
class="bjSystemBoxItem" |
|
|
class="bjSystemBoxItem" |
|
|
v-for="item in personBGIList" |
|
|
v-for="item in personBGIList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
|
|
|
:class="bjImgActive == item.id ? 'ImgBorderActive' : ''" |
|
|
|
|
|
@click="selectBjImg(item)" |
|
|
> |
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="bjImgActive == item.id" |
|
|
|
|
|
class="delIcon" |
|
|
|
|
|
@click="delImg(item.id)" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="../../assets/img/delete.png" alt="" /> |
|
|
|
|
|
</div> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@@ -327,6 +347,8 @@ |
|
|
class="bjSystemBoxItem" |
|
|
class="bjSystemBoxItem" |
|
|
v-for="item in systemSCIList" |
|
|
v-for="item in systemSCIList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
|
|
|
:class="scImgActive == item.id ? 'ImgBorderActive' : ''" |
|
|
|
|
|
@click="selectScImg(item)" |
|
|
> |
|
|
> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
@@ -355,7 +377,16 @@ |
|
|
class="bjSystemBoxItem" |
|
|
class="bjSystemBoxItem" |
|
|
v-for="item in personSCIList" |
|
|
v-for="item in personSCIList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
|
|
|
:class="scImgActive == item.id ? 'ImgBorderActive' : ''" |
|
|
|
|
|
@click="selectScImg(item)" |
|
|
> |
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="scImgActive == item.id" |
|
|
|
|
|
class="delIcon" |
|
|
|
|
|
@click="delImg(item.id)" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="../../assets/img/delete.png" alt="" /> |
|
|
|
|
|
</div> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@@ -370,6 +401,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<!-- videoType==1为竖,==2为横 --> |
|
|
<script setup> |
|
|
<script setup> |
|
|
//#region 导入 |
|
|
//#region 导入 |
|
|
import { getCurrentInstance } from "vue"; |
|
|
import { getCurrentInstance } from "vue"; |
|
|
@@ -382,6 +414,8 @@ import { |
|
|
personBGIListApi, |
|
|
personBGIListApi, |
|
|
systemSCIListApi, |
|
|
systemSCIListApi, |
|
|
personSCIListApi, |
|
|
personSCIListApi, |
|
|
|
|
|
delImgApi, |
|
|
|
|
|
personPatchApi, |
|
|
} from "@/apis/createVideo"; |
|
|
} from "@/apis/createVideo"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import Recorder from "js-audio-recorder"; //mp3插件 |
|
|
import Recorder from "js-audio-recorder"; //mp3插件 |
|
|
@@ -407,29 +441,21 @@ const videoType = ref(null); //判断横屏2还是竖屏1,初始为没有,控制 |
|
|
const showChooseModel = ref(true); // 控制弹窗显示隐藏 |
|
|
const showChooseModel = ref(true); // 控制弹窗显示隐藏 |
|
|
const modeList = ref([]); //模版列表 |
|
|
const modeList = ref([]); //模版列表 |
|
|
const modelImg = ref(null); //模版回显图 |
|
|
const modelImg = ref(null); //模版回显图 |
|
|
const modelTabItemActive = ref(0); //模版tab栏 性别 |
|
|
|
|
|
const modelTabItemActive2 = ref(0); //模版tab栏 比例 |
|
|
|
|
|
|
|
|
const modelTabItemActive = ref(-1); //模版tab栏 性别 |
|
|
|
|
|
const modelTabItemActive2 = ref(-1); //模版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 |
|
|
const modelId = ref(null); // 选中模版的id |
|
|
// 获取模版列表 |
|
|
// 获取模版列表 |
|
|
async function getModeList(sex, pageNum, pageSize) { |
|
|
|
|
|
let sexx = null; |
|
|
|
|
|
if (sex == 0) { |
|
|
|
|
|
sexx = ""; |
|
|
|
|
|
} else { |
|
|
|
|
|
sexx = sex; |
|
|
|
|
|
} |
|
|
|
|
|
const res = await modeListApi(sexx, pageNum, pageSize); |
|
|
|
|
|
if (tabVideoType.value == 0) { |
|
|
|
|
|
|
|
|
async function getModeList(sex, pageNum, pageSize, videoType) { |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await modeListApi(sex, pageNum, pageSize, videoType); |
|
|
modeList.value = res.data.list; |
|
|
modeList.value = res.data.list; |
|
|
} else { |
|
|
|
|
|
modeList.value = res.data.list.filter( |
|
|
|
|
|
(item) => item.videoType == tabVideoType.value |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
overLoadModel.value = false; |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
// ElMessage.success(msg); |
|
|
} |
|
|
} |
|
|
overLoadModel.value = false; |
|
|
|
|
|
} |
|
|
} |
|
|
// 点击模版 |
|
|
// 点击模版 |
|
|
function clickModelItem(item) { |
|
|
function clickModelItem(item) { |
|
|
@@ -439,16 +465,21 @@ function clickModelItem(item) { |
|
|
modelId.value = item.id; |
|
|
modelId.value = item.id; |
|
|
} |
|
|
} |
|
|
// tab栏切换 性别 |
|
|
// tab栏切换 性别 |
|
|
// tab栏切换 横竖比例 videoType==1为竖,==2为横 |
|
|
|
|
|
const tabSex = ref(0); |
|
|
|
|
|
const tabVideoType = ref(0); |
|
|
|
|
|
|
|
|
// tab栏切换 横竖比例 videoType==1为竖,==2为横,==-1为全部 |
|
|
|
|
|
const tabSex = ref(-1); |
|
|
|
|
|
const tabVideoType = ref(-1); |
|
|
function changeTabSex(index) { |
|
|
function changeTabSex(index) { |
|
|
modeList.value = []; |
|
|
modeList.value = []; |
|
|
modelPageNum.value = 1; |
|
|
modelPageNum.value = 1; |
|
|
modelTabItemActive.value = index; |
|
|
modelTabItemActive.value = index; |
|
|
overLoadModel.value = false; |
|
|
|
|
|
|
|
|
tabSex.value = false; |
|
|
tabSex.value = index; |
|
|
tabSex.value = index; |
|
|
getModeList(index, modelPageNum.value, modelPageSize.value); |
|
|
|
|
|
|
|
|
getModeList( |
|
|
|
|
|
index, |
|
|
|
|
|
modelPageNum.value, |
|
|
|
|
|
modelPageSize.value, |
|
|
|
|
|
tabVideoType.value |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
function changeTabVideoType(index) { |
|
|
function changeTabVideoType(index) { |
|
|
modeList.value = []; |
|
|
modeList.value = []; |
|
|
@@ -456,7 +487,12 @@ function changeTabVideoType(index) { |
|
|
modelTabItemActive2.value = index; |
|
|
modelTabItemActive2.value = index; |
|
|
overLoadModel.value = false; |
|
|
overLoadModel.value = false; |
|
|
tabVideoType.value = index; |
|
|
tabVideoType.value = index; |
|
|
getModeList(tabSex.value, modelPageNum.value, modelPageSize.value); |
|
|
|
|
|
|
|
|
getModeList( |
|
|
|
|
|
tabSex.value, |
|
|
|
|
|
modelPageNum.value, |
|
|
|
|
|
modelPageSize.value, |
|
|
|
|
|
tabVideoType.value |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
// watch(tabSex, (newVal, oldVal) => { |
|
|
// watch(tabSex, (newVal, oldVal) => { |
|
|
// if (newVal == 0) { |
|
|
// if (newVal == 0) { |
|
|
@@ -479,24 +515,16 @@ function changeTabVideoType(index) { |
|
|
// 触底刷新 |
|
|
// 触底刷新 |
|
|
async function loadMoreModel(params) { |
|
|
async function loadMoreModel(params) { |
|
|
modelPageNum.value += 1; |
|
|
modelPageNum.value += 1; |
|
|
if (modelTabItemActive.value == 0) { |
|
|
|
|
|
const res = await modeListApi("", modelPageNum.value, modelPageSize.value); |
|
|
|
|
|
modeList.value.push(...res.data.list); |
|
|
|
|
|
if (res.data.list.length == 0) { |
|
|
|
|
|
overLoadModel.value = true; |
|
|
|
|
|
modelPageNum.value = modelPageNum.value - 1; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
const res = await modeListApi( |
|
|
|
|
|
modelTabItemActive.value, |
|
|
|
|
|
modelPageNum.value, |
|
|
|
|
|
modelPageSize.value |
|
|
|
|
|
); |
|
|
|
|
|
modeList.value.push(...res.data.list); |
|
|
|
|
|
if (res.data.list.length == 0) { |
|
|
|
|
|
overLoadModel.value = true; |
|
|
|
|
|
modelPageNum.value = modelPageNum.value - 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const res = await modeListApi( |
|
|
|
|
|
tabSex.value, |
|
|
|
|
|
modelPageNum.value, |
|
|
|
|
|
modelPageSize.value, |
|
|
|
|
|
tabVideoType.value |
|
|
|
|
|
); |
|
|
|
|
|
modeList.value.push(...res.data.list); |
|
|
|
|
|
if (res.data.list.length == 0) { |
|
|
|
|
|
overLoadModel.value = true; |
|
|
|
|
|
modelPageNum.value = modelPageNum.value - 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
@@ -711,7 +739,11 @@ async function reGetpersonBGIList() { |
|
|
overLoadpersonBG.value = true; |
|
|
overLoadpersonBG.value = true; |
|
|
await getpersonBGIList(); |
|
|
await getpersonBGIList(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 点击列表中的背景图 |
|
|
|
|
|
const bjImgActive = ref(null); |
|
|
|
|
|
function selectBjImg(img) { |
|
|
|
|
|
bjImgActive.value = img.id; |
|
|
|
|
|
} |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
//#region 素材 |
|
|
//#region 素材 |
|
|
@@ -776,6 +808,87 @@ async function reGetpersonSCIList() { |
|
|
overLoadpersonSC.value = true; |
|
|
overLoadpersonSC.value = true; |
|
|
await getpersonSCIList(); |
|
|
await getpersonSCIList(); |
|
|
} |
|
|
} |
|
|
|
|
|
// 点击列表中的素材图 |
|
|
|
|
|
const scImgActive = ref(null); |
|
|
|
|
|
function selectScImg(img) { |
|
|
|
|
|
scImgActive.value = img.id; |
|
|
|
|
|
} |
|
|
|
|
|
// 删除上传的背景或素材 |
|
|
|
|
|
function delImg(id) { |
|
|
|
|
|
const msg = |
|
|
|
|
|
lanChange.value == "zh-cn" |
|
|
|
|
|
? "确定删除图片吗?" |
|
|
|
|
|
: "Are you sure to delete the picture?"; |
|
|
|
|
|
const notice = lanChange.value == "zh-cn" ? "提示" : "Notice"; |
|
|
|
|
|
const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm"; |
|
|
|
|
|
const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel"; |
|
|
|
|
|
ElMessageBox.confirm(msg, notice, { |
|
|
|
|
|
confirmButtonText: confirm, |
|
|
|
|
|
cancelButtonText: cancel, |
|
|
|
|
|
}).then(async () => { |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await delImgApi(id); |
|
|
|
|
|
reGetpersonSCIList(); |
|
|
|
|
|
reGetpersonBGIList(); |
|
|
|
|
|
ElMessage.success( |
|
|
|
|
|
lanChange.value == "zh-cn" ? "删除成功!" : "Deleted successfully!" |
|
|
|
|
|
); |
|
|
|
|
|
} catch (error) {} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
|
|
|
//#region 编辑区域 |
|
|
|
|
|
const proportion = ref(1); //比例 |
|
|
|
|
|
const elementWidth = ref(null); |
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
elementWidth.value = document.getElementById("editPosition").clientWidth; |
|
|
|
|
|
}); |
|
|
|
|
|
watch( |
|
|
|
|
|
() => videoType.value, |
|
|
|
|
|
(newValue, oldValue) => { |
|
|
|
|
|
// 根据横竖屏来确定比例 1竖2横 |
|
|
|
|
|
if (videoType.value == 1) { |
|
|
|
|
|
proportion.value = 1080 / elementWidth.value; |
|
|
|
|
|
} else if (videoType.value == 2) { |
|
|
|
|
|
proportion.value = 1920 / elementWidth.value; |
|
|
|
|
|
} |
|
|
|
|
|
console.log(proportion.value); |
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
|
|
|
const materialList = reactive({ |
|
|
|
|
|
BGI: {}, |
|
|
|
|
|
scList: [], |
|
|
|
|
|
virtual: {}, |
|
|
|
|
|
}); |
|
|
|
|
|
// 根据模版id获取信息 |
|
|
|
|
|
async function getPersonPatch() { |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await personPatchApi(modelId.value); |
|
|
|
|
|
materialList.BGI.material = res.data.backgroundMaterial; |
|
|
|
|
|
materialList.BGI.id = res.data.backgroundId + ""; |
|
|
|
|
|
materialList.virtual.material = res.data.material; |
|
|
|
|
|
materialList.virtual.id = res.data.id; |
|
|
|
|
|
// if (!materialList.virtual.w) { |
|
|
|
|
|
materialList.virtual = { |
|
|
|
|
|
...materialList.virtual, |
|
|
|
|
|
x: 50, |
|
|
|
|
|
y: 50, |
|
|
|
|
|
z: 0, |
|
|
|
|
|
w: 1, |
|
|
|
|
|
h: 1, |
|
|
|
|
|
}; |
|
|
|
|
|
// } |
|
|
|
|
|
} catch (error) {} |
|
|
|
|
|
} |
|
|
|
|
|
watch( |
|
|
|
|
|
() => modelId.value, |
|
|
|
|
|
async (newValue, oldValue) => { |
|
|
|
|
|
await getPersonPatch(); |
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
//#region |
|
|
//#region |
|
|
@@ -799,7 +912,7 @@ onMounted(async () => { |
|
|
voiceTotal(); //获取声音列表 |
|
|
voiceTotal(); //获取声音列表 |
|
|
// getSystemSCIList(); |
|
|
// getSystemSCIList(); |
|
|
// getpersonBGIList(); |
|
|
// getpersonBGIList(); |
|
|
await getModeList("", 1, 20); //获取模版列表 |
|
|
|
|
|
|
|
|
await getModeList(tabSex.value, 1, 20, tabVideoType.value); //获取模版列表 |
|
|
getpersonSCIList(); |
|
|
getpersonSCIList(); |
|
|
getSystemSCIList(); |
|
|
getSystemSCIList(); |
|
|
}); |
|
|
}); |
|
|
@@ -832,7 +945,7 @@ onMounted(async () => { |
|
|
left: 0px; |
|
|
left: 0px; |
|
|
width: 50%; |
|
|
width: 50%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
padding: 30px; |
|
|
|
|
|
|
|
|
padding: 30px 30px 10px 30px; |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
// background-color: #f1f2f6; |
|
|
// background-color: #f1f2f6; |
|
|
background-color: #454545; |
|
|
background-color: #454545; |
|
|
@@ -917,7 +1030,7 @@ onMounted(async () => { |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
justify-content: flex-start; |
|
|
justify-content: flex-start; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: calc(100% - 180px); |
|
|
|
|
|
|
|
|
max-height: calc(100% - 180px); |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|
border-radius: 20px; |
|
|
border-radius: 20px; |
|
|
// background-color: #fff; |
|
|
// background-color: #fff; |
|
|
@@ -967,6 +1080,14 @@ onMounted(async () => { |
|
|
max-width: 800px; |
|
|
max-width: 800px; |
|
|
max-height: 800px; |
|
|
max-height: 800px; |
|
|
} |
|
|
} |
|
|
|
|
|
.EditPosition { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
max-width: 800px; |
|
|
|
|
|
max-height: 800px; |
|
|
|
|
|
} |
|
|
.btnBox { |
|
|
.btnBox { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
display: flex; |
|
|
display: flex; |
|
|
@@ -1080,27 +1201,30 @@ onMounted(async () => { |
|
|
background-color: #e5e5e5; |
|
|
background-color: #e5e5e5; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
img { |
|
|
|
|
|
|
|
|
border: rgba(0, 0, 0, 0) 2px solid; |
|
|
|
|
|
> img { |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
max-height: 100%; |
|
|
} |
|
|
} |
|
|
.bjSystemBoxItemAction { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
margin-right: 3%; |
|
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
width: 30%; |
|
|
|
|
|
height: 200px; |
|
|
|
|
|
background-color: #e5e5e5; |
|
|
|
|
|
|
|
|
.delIcon { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 5px; |
|
|
|
|
|
top: 5px; |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 20px; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
|
|
|
z-index: 999; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
img { |
|
|
img { |
|
|
padding: 10px; |
|
|
|
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
max-height: 100%; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.ImgBorderActive { |
|
|
|
|
|
border: #7264f5 2px solid; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|