|
@@ -1,7 +1,57 @@
|
|
|
<template>
|
|
|
- <h4>你好啊</h4>
|
|
|
+ <div class="list_group_container">
|
|
|
+ <div v-for="item in myArray" :key="item" class="group_list">
|
|
|
+ <div class="group_header flex flex-pack-justify flex-align-center">
|
|
|
+ <div class="group_header_title">{{ item.name }}</div>
|
|
|
+ <div class="group_header_nameOperate">
|
|
|
+ <el-tooltip effect="dark" content="删除" placement="top">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="tsx" setup></script>
|
|
|
+<script lang="tsx" setup>
|
|
|
+import { Delete } from '@element-plus/icons-vue'
|
|
|
+import { ref } from 'vue'
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+const myArray = ref([
|
|
|
+ { name: '考勤', id: 1 },
|
|
|
+ { name: '人事', id: 2 },
|
|
|
+ { name: '财务', id: 3 },
|
|
|
+ { name: '行政', id: 4 }
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.list_group_container {
|
|
|
+ // 同sortGroup一样的样式
|
|
|
+ .group_list {
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ .group_header {
|
|
|
+ height: 54px;
|
|
|
+ padding: 0px 16px 0px 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgb(37, 40, 52);
|
|
|
+ background-color: rgba(244, 245, 246, 0.5);
|
|
|
+ &_title {
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+ &_nameOperate {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|