hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-09 10:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

style：修改学习路径 关卡 创建关卡页面的样式

Browse Source
This commit is contained in:
songwc
2022-10-11 15:31:17 +08:00
parent e26fdbd49a
commit 87361da9dc
7 changed files with 620 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -34,6 +34,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
``` ```
LearningPath.vue:学习路径页面 LearningPath.vue:学习路径页面
LevelAdd.vue:关卡页面
LevelAddDetail.vue:创建关卡页面
``` ```

BIN
src/assets/images/leveladd/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/images/leveladd/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/leveladd/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

284
src/views/learningpath/LearningPath.vue
View File

@@ -37,7 +37,7 @@
<a-range-picker <a-range-picker
v-model:value="value2" v-model:value="value2"
separator="至" separator="至"
:placeholder="['开始时间', '结束时间']" :placeholder="[' 开始时间', ' 结束时间']"
/> />
</div> </div>
</div> </div>
@@ -113,7 +113,12 @@
</div> </div>
<div class="inname">路径图名称</div> <div class="inname">路径图名称</div>
<div class="in"> <div class="in">
<a-input v-model:value="valueE" /> <a-input
v-model:value="valueE"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ valuei.length }}/20</div>
</div> </div>
</div> </div>
<div class="bac"> <div class="bac">
@@ -140,7 +145,8 @@
<div class="info"> <div class="info">
<div class="inname">路径说明</div> <div class="inname">路径说明</div>
<div class="in"> <div class="in">
<a-textarea v-model:value="valuei" /> <a-textarea v-model:value="valuei" maxlength="150" />
<div class="showcount">{{ valuei.length }}/150</div>
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
@@ -228,25 +234,25 @@ export default {
imgData: [ imgData: [
{ {
id: 1, id: 1,
source: require("../../assets/px.jpg"), source: require("../../assets/images/leveladd/1.png"),
}, },
{ {
id: 2, id: 2,
source: require("../../assets/px.jpg"), source: require("../../assets/images/leveladd/2.png"),
}, },
{ {
id: 3, id: 3,
source: require("../../assets/px.jpg"), source: require("../../assets/images/leveladd/3.png"),
}, },
], ],
currentPage: 1, currentPage: 1,
tableDataTotal: 20, tableDataTotal: 100,
pageSize: 10, pageSize: 10,
value1: " ", value1: "",
value2: ref(), value2: ref(),
valueE: ref(" "), valueE: "",
valueEE: ref(" "), valueEE: "",
valuei: ref(" "), valuei: "",
}); });
const tableDataFunc = () => { const tableDataFunc = () => {
const columns = [ const columns = [
@@ -314,38 +320,38 @@ export default {
key: "opacation", key: "opacation",
width: 200, width: 200,
align: "center", align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽 // scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => { // customRender: (text) => {
console.log(text); // console.log(text);
return ( // return (
<div class="opa"> // <div class="opa">
<div class="opacation"> // <div class="opacation">
<span class={text.record.haspub ? "activecls" : "errorCls"}> // <span class={text.record.haspub ? "activecls" : "errorCls"}>
发布 // 发布
</span> // </span>
<span style={{ "margin-left": "25px" }}>编辑</span> // <span style={{ "margin-left": "25px" }}>编辑</span>
<router-link to="/leveladd"> // <router-link to="/leveladd">
<span style={{ "margin-left": "25px" }}>关卡</span> // <span style={{ "margin-left": "25px" }}>关卡</span>
</router-link> // </router-link>
<span style={{ "margin-left": "25px" }} class="more"> // <div style={{ "margin-left": "25px" }} class="more">
<span>授权</span> // <span>授权</span>
<div class="moreArrow"></div> // <div class="moreArrow"></div>
<div class="moreItems"></div> // <div class="moreItems"></div>
</span> // </div>
<span // <div
style={{ "margin-left": "21px", "margin-right": "30px" }} // style={{ "margin-left": "21px", "margin-right": "30px" }}
class="more" // class="more"
> // >
<span>更多</span> // <span>更多</span>
<div class="moreArrow"></div> // <div class="moreArrow"></div>
<div class="moreItems"></div> // <div class="moreItems"></div>
</span> // </div>
</div> // </div>
</div> // </div>
); // );
}, // },
}, },
]; ];
return columns; return columns;
@@ -366,6 +372,102 @@ export default {
const chooseImg = (id) => { const chooseImg = (id) => {
console.log(id); console.log(id);
}; };
const getTableDate = () => {
let data = state.tableData;
data.map((value) => {
{
//单层项目
value.opacation = (
<div class="operation">
<div class="nSelect">
{value.state === "草稿" ? (
<div class="fb">
<div class="jc">发布</div>
<div class="jc">编辑</div>
</div>
) : (
<div></div>
)}
{value.state === "已发布" ? (
<div class="fb">
<div class="jc">编辑</div>
</div>
) : (
<div></div>
)}
{value.state === "已停用" ? (
<div class="fb">
<div class="jc">复制</div>
</div>
) : (
<div></div>
)}
</div>
<div class="tableSelect">
<router-link to="/leveladd">
<div class="g1">关卡</div>
</router-link>
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="授权"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="权限名单" label="权限名单">
<div>权限名单</div>
</a-select-option>
<a-select-option value="归属权" label="归属权">
<div
onClick={() => {
console.log("点击了");
}}
>
归属权
</div>
</a-select-option>
<a-select-option value="查看权" label="查看权">
<div>查看权</div>
</a-select-option>
<a-select-option value="管理权" label="管理权">
<div>管理权</div>
</a-select-option>
</a-select>
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
value="复制"
label="复制"
style="padding-left:35px"
>
<div>复制</div>
</a-select-option>
<a-select-option
value="取消"
label="取消"
style="padding-left:35px"
>
<div
onClick={() => {
console.log("点击了");
}}
>
取消
</div>
</a-select-option>
</a-select>
</div>
</div>
);
}
});
state.tableData = data;
};
getTableDate();
return { return {
...toRefs(state), ...toRefs(state),
selectProjectName, selectProjectName,
@@ -505,6 +607,85 @@ export default {
bottom: 20px; bottom: 20px;
} }
} }
.operation {
display: flex;
justify-content: right;
.nSelect {
.fb {
display: flex;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
}
}
}
.tableSelect {
margin-right: 20px;
display: flex;
align-items: center;
justify-content: right;
.g1 {
color: #4ea6ff;
font-size: 14px;
}
}
}
// .operation {
// font-size: 14px;
// font-weight: 400;
// color: #4ea6ff;
// // line-height: 36px;
// .operation1 {
// margin-left: 21px;
// width: 28px;
// display: inline-block;
// }
// .operation3 {
// margin-left: 21px;
// width: 70px;
// display: inline-block;
// text-align: center;
// }
// .more {
// width: 50px;
// display: inline-block;
// margin-left: 21px;
// position: relative;
// text-align: left;
// // z-index: 99999;
// .moreArrow {
// width: 13px;
// height: 7px;
// display: inline-block;
// background-image: url("../../assets/images/navtop/down.png");
// background-size: 100%;
// margin: 2px;
// margin-left: 7px;
// }
// .moreItems {
// width: 80px;
// padding: 5px;
// display: none;
// background: #ffffff;
// box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
// border: 0px solid #dcdcdc;
// position: absolute;
// left: 0px;
// top: 28px;
// z-index: 100;
// text-align: center;
// }
// }
// .more:hover .moreArrow {
// background-image: url("../../assets/images/navtop/up.png");
// }
// .more:hover .moreItems {
// display: block;
// }
// }
.out { .out {
display: block; display: block;
position: absolute; position: absolute;
@@ -531,6 +712,7 @@ export default {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-left: 27px; margin-left: 27px;
margin-top: -2px;
} }
.topc { .topc {
color: #000000; color: #000000;
@@ -567,12 +749,19 @@ export default {
.in { .in {
margin-left: 14px; margin-left: 14px;
width: 81%; width: 81%;
position: relative;
.ant-input { .ant-input {
border-radius: 5px; border-radius: 5px;
// height: 120%; // height: 120%;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
} }
} }
.bac { .bac {
@@ -624,6 +813,7 @@ export default {
.in { .in {
margin-left: 14px; margin-left: 14px;
width: 81%; width: 81%;
position: relative;
.ant-input { .ant-input {
border-radius: 5px; border-radius: 5px;
// height: 120%; // height: 120%;
@@ -631,6 +821,12 @@ export default {
height: 130px; height: 130px;
resize: none; resize: none;
} }
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
} }
} }
.btn { .btn {
@@ -669,6 +865,7 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #4ea6ff; color: #4ea6ff;
display: flex;
// line-height: 36px; // line-height: 36px;
.activecls { .activecls {
display: inline-block; display: inline-block;
@@ -678,6 +875,7 @@ export default {
} }
.more { .more {
position: relative; position: relative;
height: 100%;
.moreArrow { .moreArrow {
width: 13px; width: 13px;
height: 7px; height: 7px;
@@ -697,8 +895,8 @@ export default {
border: 0px solid #dcdcdc; border: 0px solid #dcdcdc;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 18px; top: 30px;
z-index: 100; z-index: 999;
} }
} }
.more:hover .moreArrow { .more:hover .moreArrow {

91
src/views/learningpath/LevelAdd.vue
View File

@@ -120,11 +120,14 @@
<div class="linee"></div> <div class="linee"></div>
<div class="itright"> <div class="itright">
<span class="te">编辑</span> <span class="te">编辑</span>
<span class="more"> <div class="more">
<span class="te" style="margin-left: 20px">更多</span> <div class="te" style="margin-left: 20px">更多</div>
<div class="moreArrow"></div> <div class="moreArrow"></div>
<div class="moreItems"></div> <div class="moreItems">
</span> <div class="roleItem">复制</div>
<div class="roleItem">删除</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -441,7 +444,9 @@ export default {
.more { .more {
position: relative; position: relative;
margin-right: 30px; margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreArrow { .moreArrow {
width: 13px; width: 13px;
height: 7px; height: 7px;
@@ -461,7 +466,7 @@ export default {
border: 0px solid #dcdcdc; border: 0px solid #dcdcdc;
position: absolute; position: absolute;
left: -48px; left: -48px;
top: 28px; top: 30px;
z-index: 100; z-index: 100;
.sammo { .sammo {
text-align: center; text-align: center;
@@ -611,6 +616,7 @@ export default {
} }
.Lbom { .Lbom {
position: relative; position: relative;
margin-bottom: 20px;
.item { .item {
width: 100%; width: 100%;
height: 200px; height: 200px;
@@ -680,41 +686,56 @@ export default {
.itright { .itright {
position: absolute; position: absolute;
right: 45px; right: 45px;
display: flex;
.te { .te {
color: #4ea6ff; color: #4ea6ff;
font-size: 14px; font-size: 14px;
} }
} .more {
.more { position: relative;
position: relative; height: 30px;
.moreArrow { display: flex;
width: 13px; .moreArrow {
height: 7px; width: 13px;
display: inline-block; height: 7px;
background-image: url("../../assets/images/navtop/down.png"); display: inline-block;
background-size: 100%; background-image: url("../../assets/images/navtop/down.png");
margin: 2px; background-size: 100%;
margin-left: 7px; margin: 2px;
margin-left: 7px;
margin-top: 6px;
}
.moreItems {
width: 80px;
height: 70px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 20px;
z-index: 100;
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
display: flex;
justify-content: center;
}
.roleItem:hover {
color: #4ea6ff;
}
}
} }
.moreItems { .more:hover .moreArrow {
width: 80px; background-image: url("../../assets/images/navtop/up.png");
height: 70px; }
display: none; .more:hover .moreItems {
background: #ffffff; display: block;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 18px;
z-index: 100;
} }
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
} }
} }
} }

375
src/views/learningpath/LevelAddDetail.vue
View File

@@ -57,13 +57,21 @@
class="img2" class="img2"
src="../../assets/images/leveladd/more.png" src="../../assets/images/leveladd/more.png"
/> />
<div class="more"> <!-- <div class="more">
<span style="color: #7096e3">更多</span> <div style="color: #7096e3">更多</div>
<div class="moreArrow"></div> <div class="moreArrow"></div>
<div class="moreItems"> <div class="moreItems">
<div class="sammo">撤回</div> <div class="sammo">撤回</div>
<div class="sammo">复制</div> <div class="sammo">复制</div>
</div> </div>
</div> -->
<div class="role">
<div>更多</div>
<div class="roleArrow"></div>
<div class="roleItems">
<div class="roleItem">复制</div>
<div class="roleItem">删除</div>
</div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/back.png" /> <img class="img2" src="../../assets/images/leveladd/back.png" />
@@ -257,21 +265,124 @@
</div> </div>
</div> </div>
</div> </div>
<a-drawer <div class="draw" style="position: relative">
v-model:visible="visible" <a-drawer
class="custom-class" v-model:visible="visible"
title="关联项目" class="drawerStyle"
placement="right" title="关联项目"
width="50%" placement="right"
@after-visible-change="afterVisibleChange" width="50%"
> @after-visible-change="afterVisibleChange"
</a-drawer> >
<div class="drawerMain">
<div class="header">
<div class="headerTitle">关联项目</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="showDrawer"
/>
</div>
<div class="drawerbox">
<a-table
:columns="drawercolumns"
:data-source="drawertableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
</div>
<div
class="btnn"
style="
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
"
>
<button
@click="showDrawer"
style="
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
"
>
取消
</button>
<button
@click="showDrawer"
style="
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
"
>
确定
</button>
</div>
</div>
</a-drawer>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
const drawercolumns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 200,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
];
export default { export default {
name: "LevelAddDetail", name: "LevelAddDetail",
setup() { setup() {
@@ -301,23 +412,18 @@ export default {
projectNameList2: [ projectNameList2: [
{ {
id: 1, id: 1,
value: "项目一", value: "批量操作",
label: "项目一", label: "批量操作",
}, },
{ {
id: 2, id: 2,
value: "项目二", value: "删除任务",
label: "项目二", label: "删除任务",
}, },
{ {
id: 3, id: 3,
value: "项目三", value: "移动任务到关卡",
label: "项目三", label: "移动任务到关卡",
},
{
id: 4,
value: "项目四",
label: "项目四",
}, },
], ],
level: [ level: [
@@ -389,6 +495,101 @@ export default {
checkedd: false, checkedd: false,
}, },
], ],
drawertableData: [
{
key: 1,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 2,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 3,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 5,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 6,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 7,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
currentPage: 1, currentPage: 1,
tableDataTotal: 100, tableDataTotal: 100,
pageSize: 10, pageSize: 10,
@@ -401,7 +602,7 @@ export default {
console.log("value", value, index); console.log("value", value, index);
}; };
const showDrawer = () => { const showDrawer = () => {
state.visible = true; state.visible = !state.visible;
}; };
const afterVisibleChange = (bool) => { const afterVisibleChange = (bool) => {
console.log("visible", bool); console.log("visible", bool);
@@ -513,6 +714,7 @@ export default {
tableDataFunc, tableDataFunc,
showDrawer, showDrawer,
afterVisibleChange, afterVisibleChange,
drawercolumns,
}; };
}, },
}; };
@@ -526,6 +728,52 @@ export default {
clear: both; clear: both;
} }
.drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.drawerbox {
margin: 20px 38px 30px;
th {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
}
}
.allCon { .allCon {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -719,50 +967,52 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
.more { .role {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #333330;
line-height: 36px;
cursor: pointer;
position: relative; position: relative;
margin-right: 30px; margin-right: 20px;
.roleArrow {
.moreArrow {
width: 13px; width: 13px;
height: 7px; height: 7px;
display: inline-block; margin-left: 8px;
background-image: url("../../assets/images/navtop/down.png"); background-image: url(../../assets/images/navtop/down.png);
background-size: 100%; background-size: 100%;
margin: 2px;
margin-left: 15px;
} }
.moreItems { .roleItems {
width: 110px; width: 109px;
height: 80px; height: 90px;
display: none; padding-top: 10px;
background: #ffffff; background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
// border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute; position: absolute;
left: -48px; top: 35px;
top: 28px; right: 0px;
text-align: center;
display: none;
z-index: 100; z-index: 100;
.sammo {
text-align: center;
margin-top: 12px;
}
.sammo:hover {
color: #4ea6ff;
}
} }
.moreItems:hover { .roleItem {
display: block; font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
}
.roleItem:hover {
color: #4ea6ff;
} }
} }
.role:hover .roleItems {
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block; display: block;
} }
.role:hover .roleArrow {
background-image: url(../../assets/images/navtop/up.png);
}
} }
} }
} }
@@ -879,7 +1129,24 @@ export default {
} }
} }
} }
// .drawerbox {
// // margin: 20px 38px 30px;
// th.h {
// background-color: #eff4fc !important;
// }
// .ant-table-tbody
// > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
// > td {
// background: #f6f9fd;
// }
// }
.draw {
.drawerbox {
}
}
} }
.opat { .opat {
.opacationt { .opacationt {
display: flex; display: flex;