Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
84726a22 by lihua
Options

登录角色选择，数据提供方首页

1 parent 1129f998
Inline Side-by-side
Showing 23 changed files with 634 additions and 23 deletions
src/assets/images/login-bg.png
src/assets/images/login-bg.png

2.44 MB | W: | H:

src/assets/images/login-bg.png

514 KB | W: | H:

src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
  • 2-up
  • Swipe
  • Onion skin
src/router/modules/homeIndex.ts 0 → 100644
1 import type { RouteRecordRaw } from 'vue-router'
2 function Layout() {
3 return import('@/layouts/index.vue')
4 }
5 const routes: RouteRecordRaw[] = [
6 {
7 path: '/data-home-index',
8 component: Layout,
9 meta: {
10 title: '首页',
11 icon: 'sidebar-videos',
12 },
13 children: [{
14 path: '',
15 name: 'homeIndex',
16 component: () => import('@/views/homeIndex.vue'),
17 meta: {
18 title: '首页',
19 sidebar: false,
20 breadcrumb: false,
21 cache: true
22 },
23 }]
24 },
25 ]
26 export default routes
src/router/routes.ts
...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset'; ...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset';
5 import DataService from './modules/dataService'; 5 import DataService from './modules/dataService';
6 import DataSmartContract from './modules/dataSmartContract'; 6 import DataSmartContract from './modules/dataSmartContract';
7 import DataFacilitator from './modules/dataFacilitator'; 7 import DataFacilitator from './modules/dataFacilitator';
8 import HomeIndex from './modules/homeIndex';
8 9
9 import useSettingsStore from '@/store/modules/settings' 10 import useSettingsStore from '@/store/modules/settings'
10 11
...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [ ...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [
95 ...DataService, 96 ...DataService,
96 ...DataSmartContract, 97 ...DataSmartContract,
97 ...DataFacilitator, 98 ...DataFacilitator,
99 ...HomeIndex,
98 // ...DataAssetRegistry, 100 // ...DataAssetRegistry,
99 ] 101 ]
100 102
......
src/store/modules/user.ts
...@@ -30,6 +30,7 @@ const useUserStore = defineStore( ...@@ -30,6 +30,7 @@ const useUserStore = defineStore(
30 /* idass的登录页面url，退出登录需要跳转到登录页。*/ 30 /* idass的登录页面url，退出登录需要跳转到登录页。*/
31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL; 31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL;
32 const timer: any = ref(null); 32 const timer: any = ref(null);
33 const isGetCurrUserInfo = ref(false); //记录登录时是否已经获取登录用户的信息，根据用户信息展示角色选择对话框。
33 //获取token. 34 //获取token.
34 function getToken(data, state) { 35 function getToken(data, state) {
35 data.platformGuid = "7f16f697aec111ef8656fa163e60becd"; 36 data.platformGuid = "7f16f697aec111ef8656fa163e60becd";
...@@ -71,26 +72,50 @@ const useUserStore = defineStore( ...@@ -71,26 +72,50 @@ const useUserStore = defineStore(
71 localStorage.setItem('userName', res.data?.staffName); 72 localStorage.setItem('userName', res.data?.staffName);
72 localStorage.setItem('userData', JSON.stringify(res.data)); 73 localStorage.setItem('userData', JSON.stringify(res.data));
73 userData.value = localStorage.getItem('userData'); 74 userData.value = localStorage.getItem('userData');
74 return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid，为空的问题 75 isGetCurrUserInfo.value = true
75 if (info.code == '00000') { 76 // return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid，为空的问题
76 localStorage.setItem('userInfoData', JSON.stringify(info.data)); 77 // if (info.code == '00000') {
77 userInfoData.value = info.data; 78 // localStorage.setItem('userInfoData', JSON.stringify(info.data));
78 // window.location.href = location.origin + info.data[0].menuList[0].path 79 // userInfoData.value = info.data;
79 } else { 80 // // window.location.href = location.origin + info.data[0].menuList[0].path
80 ElMessage.error(info.msg) 81 // } else {
81 } 82 // ElMessage.error(info.msg)
82 }) 83 // }
84 // })
83 } else { 85 } else {
84 ElMessage.error(res.msg) 86 ElMessage.error(res.msg)
85 } 87 }
86 }) 88 })
87 } else { 89 } else {
88 isLogin.value = false; 90 isLogin.value = false;
91 isGetCurrUserInfo.value = false;
89 // ElMessage.error(res.msg);//授权码被重复使用，不抛出异常。 92 // ElMessage.error(res.msg);//授权码被重复使用，不抛出异常。
90 } 93 }
91 }); 94 });
92 } 95 }
93 96
97 /** 根据选择的角色获取用户菜单 */
98 function getUserSystemMenuByRole(role) {
99 let data = localStorage.getItem('userData');
100 let userData = data && JSON.parse(data);
101 return getSystemMenu(
102 { tenantGuid: localStorage.getItem('currentTenantGuid') },
103 userData?.isAdmin == "Y" &&
104 (!userData?.superTubeFlag ||
105 userData?.superTubeFlag == "Y")
106 ).then((info: any) => {
107 //解决页面调用流程接口传递staffGuid，为空的问题
108 if (info.code == "00000") {
109 localStorage.setItem("userInfoData", JSON.stringify(info.data));
110 userInfoData.value = info.data;
111 // window.location.href = location.origin + info.data[0].menuList[0].path
112 return true;
113 } else {
114 ElMessage.error(info.msg);
115 }
116 });
117 }
118
94 async function refreshUserToken(isExec = true) { 119 async function refreshUserToken(isExec = true) {
95 let expiresIn = localStorage.getItem('expiresIn'); 120 let expiresIn = localStorage.getItem('expiresIn');
96 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) { 121 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) {
...@@ -182,6 +207,7 @@ const useUserStore = defineStore( ...@@ -182,6 +207,7 @@ const useUserStore = defineStore(
182 token.value = ''; 207 token.value = '';
183 timer.value && clearInterval(timer.value); 208 timer.value && clearInterval(timer.value);
184 isLogin.value = false; 209 isLogin.value = false;
210 isGetCurrUserInfo.value = false;
185 userInfoData.value = []; 211 userInfoData.value = [];
186 routeStore.removeRoutes() 212 routeStore.removeRoutes()
187 menuStore.setActived(0) 213 menuStore.setActived(0)
...@@ -200,6 +226,7 @@ const useUserStore = defineStore( ...@@ -200,6 +226,7 @@ const useUserStore = defineStore(
200 token.value = ''; 226 token.value = '';
201 timer.value && clearInterval(timer.value); 227 timer.value && clearInterval(timer.value);
202 isLogin.value = false; 228 isLogin.value = false;
229 isGetCurrUserInfo.value = false;
203 userInfoData.value = []; 230 userInfoData.value = [];
204 routeStore.removeRoutes() 231 routeStore.removeRoutes()
205 menuStore.setActived(0) 232 menuStore.setActived(0)
...@@ -323,9 +350,11 @@ const useUserStore = defineStore( ...@@ -323,9 +350,11 @@ const useUserStore = defineStore(
323 currentTime, 350 currentTime,
324 permissions, 351 permissions,
325 isLogin, 352 isLogin,
353 isGetCurrUserInfo,
326 isLoginOut, 354 isLoginOut,
327 getTokenPromise, 355 getTokenPromise,
328 getToken, 356 getToken,
357 getUserSystemMenuByRole,
329 login, 358 login,
330 logout, 359 logout,
331 getPermissions, 360 getPermissions,
......
src/views/[...all].vue
...@@ -8,48 +8,98 @@ meta: ...@@ -8,48 +8,98 @@ meta:
8 8
9 <script lang="ts" setup> 9 <script lang="ts" setup>
10 import useUserStore from '@/store/modules/user'; 10 import useUserStore from '@/store/modules/user';
11 import { ElMessage } from 'element-plus';
11 12
12 const userStore = useUserStore() 13 const userStore = useUserStore()
13 const router = useRouter() 14 const router = useRouter()
15 const route = useRoute()
14 16
15 const data = ref({ 17 /** 对话框显示隐藏 */
16 inter: NaN, 18 const dialogVisible = computed(() => {
17 countdown: 5, 19 return route.query.code && userStore.isGetCurrUserInfo;
18 }) 20 });
21
22 const loading = ref(false);
23
24 /** 记录用户选择的角色 */
25 const selectRole = ref('use');
19 26
20 onBeforeRouteLeave(() => { 27 onBeforeRouteLeave(() => {
21 data.value.inter && clearInterval(data.value.inter)
22 }) 28 })
23 29
24 onMounted(() => { 30 onMounted(() => {
25 // data.value.inter = setInterval(() => {
26 // data.value.countdown--
27 // if (data.value.countdown === 0) {
28 // data.value.inter && clearInterval(data.value.inter)
29 // goBack()
30 // }
31 // }, 1000)
32 goBack() 31 goBack()
33 }) 32 })
34 33
35 function goBack() { 34 function goBack() {
35 }
36
37 const beforeLogin = () => {
36 if (userStore.getTokenPromise) { 38 if (userStore.getTokenPromise) {
37 userStore.getTokenPromise.then(() => { 39 userStore.getTokenPromise.then(() => {
40 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
41 if (res === true) {
42 userStore.isGetCurrUserInfo = false;
43 }
38 router.push('/') 44 router.push('/')
45 })
39 }); 46 });
40 } else { 47 } else {
48 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
49 if (res === true) {
50 userStore.isGetCurrUserInfo = false;
51 }
41 router.push('/') 52 router.push('/')
53 })
42 } 54 }
43 } 55 }
56
44 </script> 57 </script>
45 58
46 <template> 59 <template>
47 <div class="notfound"> 60 <div class="full-page">
61 <div class="notfound" v-show="!dialogVisible">
48 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif"> 62 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif">
49 </div> 63 </div>
64 <div class="bg-banner" v-if="dialogVisible">
65 <div id="login-box">
66 <div class="login_form login-size">
67 <div class="login-title">选择角色</div>
68 <div class="row-main">
69 <div class="per" :class="selectRole == 'use' ? 'selected' : ''" @click="selectRole = 'use'">
70 <div class="img-use"></div>
71 <div class="title">数据使用方</div>
72 </div>
73 <div class="per" :class="selectRole == 'provider' ? 'selected' : ''" @click="selectRole = 'provider'">
74 <div class="img-provider"></div>
75 <div class="title">数据提供方</div>
76 </div>
77 <div class="per" :class="selectRole == 'operation' ? 'selected' : ''" @click="selectRole = 'operation'">
78 <div class="img-operation"></div>
79 <div class="title">平台运营方</div>
80 </div>
81 </div>
82 <div class="login-footer">
83 <el-button :loading="loading" ref="loginButton" type="primary" size="large" style="width: 100%;"
84 @click.prevent="beforeLogin">确认</el-button>
85 </div>
86 </div>
87 </div>
88 <div class="copyright_text">
89 <span>Copyright © 2015-2024</span>
90 <a style="color: #4FA1A4;margin: 0 8px;" href="https://beian.miit.gov.cn" target="_blank">京ICP备2024044205号</a>
91 <span>北京传世博润科技有限公司</span>
92 </div>
93 </div>
94 </div>
50 </template> 95 </template>
51 96
52 <style lang="scss" scoped> 97 <style lang="scss" scoped>
98 .full-page {
99 height: 100%;
100 width: 100%;
101 }
102
53 .notfound { 103 .notfound {
54 display: flex; 104 display: flex;
55 align-items: center; 105 align-items: center;
...@@ -77,4 +127,166 @@ function goBack() { ...@@ -77,4 +127,166 @@ function goBack() {
77 } 127 }
78 } 128 }
79 } 129 }
130
131 .bg-banner {
132 // position: fixed;
133 // z-index: 1001;
134 width: 100%;
135 height: 100%;
136 background-image: url('@/assets/images/login-bg.png');
137 background-size: cover;
138 /* 背景图覆盖整个元素 */
139 background-position: center;
140 /* 背景图居中 */
141 background-repeat: no-repeat;
142 /* 防止背景图重复 */
143 }
144
145 #login-box {
146 display: flex;
147 justify-content: center;
148 align-items: center;
149 height: 100%;
150
151 .login-form {
152 display: flex;
153 flex-direction: column;
154 justify-content: center;
155 min-height: 500px;
156 width: 368px;
157 overflow: hidden;
158
159 .title-container {
160 position: relative;
161
162 .title {
163 font-size: 28px;
164 color: #212121;
165 letter-spacing: 0;
166 text-align: center;
167 line-height: 42px;
168 font-weight: 600;
169 margin-bottom: 32px;
170 }
171 }
172 }
173
174 }
175
176 .login-title {
177 font-family: PingFangSC-Semibold;
178 font-size: 24px;
179 color: #212121;
180 letter-spacing: 0;
181 line-height: 36px;
182 font-weight: 600;
183 margin-bottom: 33px;
184 }
185
186 .login_form {
187 position: relative;
188 background: #FFFFFF;
189 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
190 border-radius: 2px;
191
192 .row-main {
193 display: flex;
194 flex-direction: row;
195 column-gap: 40px;
196
197 .per {
198 cursor: pointer;
199
200 &.selected {
201 .img-use {
202 background-image: url('@/assets/images/dataUser-select.png');
203 }
204
205 .img-provider {
206 background-image: url('@/assets/images/dataProvider-select.png');
207 }
208
209 .img-operation {
210 background-image: url('@/assets/images/dataOperation-select.png');
211 }
212
213 .title {
214 color: #1478E9;
215 }
216 }
217
218 .img-use {
219 width: 100px;
220 height: 100px;
221 background-image: url('@/assets/images/dataUser-default.png');
222 background-size: cover;
223 /* 背景图覆盖整个元素 */
224 background-position: center;
225 /* 背景图居中 */
226 background-repeat: no-repeat;
227 }
228
229 .img-provider {
230 width: 100px;
231 height: 100px;
232 background-image: url('@/assets/images/dataProvider-default.png');
233 background-size: cover;
234 /* 背景图覆盖整个元素 */
235 background-position: center;
236 /* 背景图居中 */
237 background-repeat: no-repeat;
238 }
239
240 .img-operation {
241 width: 100px;
242 height: 100px;
243 background-image: url('@/assets/images/dataOperation-default.png');
244 background-size: cover;
245 /* 背景图覆盖整个元素 */
246 background-position: center;
247 /* 背景图居中 */
248 background-repeat: no-repeat;
249 }
250
251 .title {
252 margin-top: 8px;
253 font-family: PingFangSC-Regular;
254 font-size: 14px;
255 color: #666666;
256 line-height: 21px;
257 font-weight: 400;
258 text-align: center;
259 }
260 }
261 }
262 }
263
264 .login-size {
265 padding: 40px 32px;
266 width: 444px;
267 height: 420px;
268 }
269
270 .login-footer {
271 display: flex;
272 flex-direction: column;
273 margin-top: 54px;
274 }
275
276 :deep(.el-button--primary) {
277 background-image: linear-gradient(116deg, #0C48F5 0%, #23D6D1 95%);
278 }
279
280 .copyright_text {
281 width: 100%;
282 font-size: 12px;
283 color: #2c3e50;
284 line-height: 18px;
285 text-align: center;
286 font-weight: 400;
287 position: absolute;
288 bottom: 2px;
289 left: 50%;
290 transform: translateX(-50%);
291 }
80 </style> 292 </style>
......
src/views/data_asset/registerCatalogCreate.vue
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
21 getRegisterCatalogTableList, 21 getRegisterCatalogTableList,
22 checkDamTableChange, 22 checkDamTableChange,
23 getTenantList, 23 getTenantList,
24 getDamTypesList 24 getDamTypesList,//获取数据目录分类。
25 } from "@/api/modules/dataAsset"; 25 } from "@/api/modules/dataAsset";
26 import { 26 import {
27 getValidApi, 27 getValidApi,
......
src/views/homeIndex.vue 0 → 100644
1 <script lang="ts" setup name="homeIndex">
2
3 const router = useRouter();
4
5 const dataRole = ref('operation');
6
7 const click = (command) => {
8 let url = ''
9 switch (command) {
10 case 'identify':
11 url = '/data-facilitator/authentication-management'
12 break;
13 case 'contract':
14 url = '/data-smart-contract/contract-manage'
15 break;
16 case 'dataSource':
17 url = '/data-asset/data-source';
18 break;
19 case 'dataProduct':
20 url = '/data-asset/register-catalog'
21 break;
22 case 'log':
23 url = '/data-smart-contract/contract-log-manage';
24 break;
25 case 'API':
26 url = '/data-service/api-management';
27 break;
28 case 'dataCatalog':
29 url = '/data-product/data-catalog-sort';
30 break;
31 case 'dataStrategy':
32 url = '/data-smart-contract/strategy-management';
33 break;
34 }
35 router.push({
36 path: url
37 })
38 }
39
40 </script>
41
42 <template>
43 <div class="main-content">
44 <div class="role-main dataUse" v-if="dataRole == 'use'">
45 <div class="header-title">数据使用方</div>
46 <div class="chunk-row" @click="click('identify')">
47 <div class="img identify"></div>
48 <div class="right-main">
49 <div class="menu-title">1、身份管理</div>
50 <div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
51 </div>
52 </div>
53 <div class="chunk-row" @click="click('contract')">
54 <div class="img dataSmart"></div>
55 <div class="right-main">
56 <div class="menu-title">2、数字合约</div>
57 <div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
58 </div>
59 </div>
60 <div class="chunk-row">
61 <div class="img dataUse-img"></div>
62 <div class="right-main">
63 <div class="menu-title">3、数据使用</div>
64 <div class="desc">提供使用数据的软硬件环境，支持数据使用方按照数字合约要求，通过算法或应用使用数据提供方交付的数据产品。</div>
65 <div class="sub-row">
66 <div style="display: flex;align-items: center;">
67 <div class="menu-title">数据集</div>
68 <div class="sub-desc">如果您使用的数据产品是数据集，且是直接使用或查询数据</div>
69 </div>
70 <div style="display: flex;align-items: center;">
71 <div class="btn-title">点击进入</div>
72 <div class="btn-img"></div>
73 </div>
74 </div>
75 <div class="sub-row" @click="click('API')">
76 <div style="display: flex;align-items: center;">
77 <div class="menu-title">数据服务</div>
78 <div class="sub-desc">如果您使用的数据产品是通过API的形式被数据应用调用</div>
79 </div>
80 <div style="display: flex;align-items: center;">
81 <div class="btn-title">点击进入</div>
82 <div class="btn-img"></div>
83 </div>
84 </div>
85 </div>
86 </div>
87 <div class="chunk-row" @click="click('log')">
88 <div class="img dataLog"></div>
89 <div class="right-main">
90 <div class="menu-title">4、使用存证</div>
91 <div class="desc">数据供给方的交付存证上链查询以及数据使用方的使用存证上链查询。</div>
92 </div>
93 </div>
94 </div>
95 <div class="role-main dataProvider" v-if="dataRole == 'provider'">
96 <div class="header-title">数据提供方</div>
97 <div class="chunk-main">
98 <div class="chunk-per" @click="click('identify')">
99 <div class="img identify"></div>
100 <div class="menu-title">1、身份管理</div>
101 <div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
102 </div>
103 <div class="chunk-per" @click="click('dataSource')">
104 <div class="img dataSource"></div>
105 <div class="menu-title">2、数据源管理</div>
106 <div class="desc">将数据系统中的数据资源载入接入连接器，作为封装数据产品的亁基础。支持数据库、本地文件服务器等资源接入及管理。</div>
107 </div>
108 <div class="chunk-per" @click="click('dataProduct')">
109 <div class="img dataProduct"></div>
110 <div class="menu-title">3、数据产品管理</div>
111 <div class="desc">数据提供方基于接入数据资源封装数据产品，并对数据产品进行管理。</div>
112 </div>
113 <div class="chunk-per" @click="click('contract')">
114 <div class="img dataSmart"></div>
115 <div class="menu-title">4、数字合约</div>
116 <div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
117 </div>
118 <div class="chunk-per">
119 <div class="img dataDelivery"></div>
120 <div class="menu-title">5、数据交付</div>
121 <div class="desc">按照数字合约要求交付原始数据、脱敏后数据或计算结果数据等。</div>
122 </div>
123 <div class="chunk-per">
124 <div class="img dataControl"></div>
125 <div class="menu-title">6、数据使用控制</div>
126 <div class="desc">提供使用数据的软硬件环境，支持数据使用方按照数字合约要求，通过算法或应用使用数据提供方交付的数据产品。</div>
127 </div>
128 </div>
129 </div>
130 <div class="role-main dataOperation" v-if="dataRole == 'operation'">
131 <div class="header-title">平台运营方</div>
132 <div class="chunk-main">
133 <div class="chunk-per" @click="click('identify')">
134 <div class="img identify"></div>
135 <div class="menu-title">1、身份管理</div>
136 <div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
137 </div>
138 <div class="chunk-per" @click="click('dataCatalog')">
139 <div class="img dataSource"></div>
140 <div class="menu-title">2、数据目录分类规则</div>
141 <div class="desc">制定数据目录分类规则，包含主题分类、行业分类、机构分类、阚应用场景分类、交付形式等。</div>
142 </div>
143 <div class="chunk-per" @click="click('dataStrategy')">
144 <div class="img dataProduct"></div>
145 <div class="menu-title">3、策略管理</div>
146 <div class="desc">制定行为类和约束类策略，行为羹类策略包含交付和操作两个维度。约束类则时间、地点、应用等。</div>
147 </div>
148 <div class="chunk-per" @click="click('contract')">
149 <div class="img dataSmart"></div>
150 <div class="menu-title">4、数字合约</div>
151 <div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
152 </div>
153 <div class="chunk-per" @click="click('log')">
154 <div class="img dataLog"></div>
155 <div class="menu-title">5、存证审计</div>
156 <div class="desc">数据供给方的交付存证上链查询以及数据使用方的使用存证上链查询。</div>
157 </div>
158 </div>
159 </div>
160 </div>
161 </template>
162
163 <style lang="scss" scoped>
164 .main-content {
165 height: 100%;
166 width: 100%;
167 padding: 40px;
168 overflow-y: auto;
169
170 .role-main {
171 width: 100%;
172 }
173 }
174
175 .header-title {
176 font-size: 24px;
177 color: #212121;
178 letter-spacing: 0;
179 text-align: center;
180 line-height: 36px;
181 font-weight: 600;
182 text-align: left;
183 }
184
185 .chunk-row {
186 border: 1px solid #d9d9d9;
187 padding: 24px 36px;
188 display: flex;
189 flex-direction: row;
190 margin-top: 16px;
191 cursor: pointer;
192
193 &:hover {
194 opacity: 0.8;
195 background: #EBF6F7;
196 border: 1px solid rgba(79, 161, 164, 0.5);
197 border-radius: 4px;
198 }
199
200 .right-main {
201 margin-left: 32px;
202 flex: 1;
203
204 .menu-title {
205 font-size: 18px;
206 color: #212121;
207 letter-spacing: 0;
208 line-height: 27px;
209 font-weight: 600;
210 }
211
212 .desc {
213 font-size: 16px;
214 color: #666666;
215 letter-spacing: 0;
216 line-height: 24px;
217 font-weight: 400;
218 margin-top: 4px;
219 }
220
221 .sub-row {
222 margin-top: 24px;
223 background: #FAFAFA;
224 display: flex;
225 padding: 16px 24px;
226 align-items: center;
227 justify-content: space-between;
228
229 .sub-desc {
230 font-size: 14px;
231 color: #999999;
232 line-height: 21px;
233 font-weight: 400;
234 margin-left: 32px;
235 }
236
237 .btn-title {
238 font-size: 14px;
239 color: #4FA1A4;
240 line-height: 21px;
241 cursor: pointer;
242 }
243
244 .btn-img {
245 margin-left: 8px;
246 background-image: url('@/assets/images/dataTrust/enter.png');
247 width: 16px;
248 height: 16px;
249 background-size: cover;
250 /* 背景图覆盖整个元素 */
251 background-position: center;
252 /* 背景图居中 */
253 background-repeat: no-repeat;
254 }
255 }
256 }
257 }
258
259 .img {
260 flex-shrink: 0;
261 width: 48px;
262 height: 48px;
263 background-size: cover;
264 /* 背景图覆盖整个元素 */
265 background-position: center;
266 /* 背景图居中 */
267 background-repeat: no-repeat;
268
269 &.identify {
270 background-image: url('@/assets/images/dataTrust/identify.png');
271 }
272
273 &.dataSmart {
274 background-image: url('@/assets/images/dataTrust/dataSmart.png');
275 }
276
277 &.dataUse-img {
278 background-image: url('@/assets/images/dataTrust/dataUse.png');
279 }
280
281 &.dataLog {
282 background-image: url('@/assets/images/dataTrust/dataLog.png');
283 }
284
285 &.dataSource {
286 background-image: url('@/assets/images/dataTrust/dataSource.png');
287 }
288
289 &.dataProduct {
290 background-image: url('@/assets/images/dataTrust/product.png');
291 }
292
293 &.dataDelivery {
294 background-image: url('@/assets/images/dataTrust/dataDelivery.png');
295 }
296
297 &.dataControl {
298 background-image: url('@/assets/images/dataTrust/dataControl.png');
299 }
300 }
301
302 .chunk-main {
303 display: flex;
304 column-gap: 24px;
305 row-gap: 24px;
306 margin-top: 16px;
307 flex-wrap: wrap;
308
309 .chunk-per {
310 border: 1px solid #d9d9d9;
311 width: calc(25% - 18px);
312 padding: 20px;
313 cursor: pointer;
314
315 &:hover {
316 opacity: 0.8;
317 background: #EBF6F7;
318 border: 1px solid rgba(79, 161, 164, 0.5);
319 border-radius: 4px;
320 }
321
322 .menu-title {
323 font-size: 18px;
324 color: #212121;
325 letter-spacing: 0;
326 line-height: 27px;
327 font-weight: 600;
328 margin-top: 12px;
329 }
330
331 .desc {
332 margin-top: 8px;
333 font-size: 16px;
334 color: #666666;
335 letter-spacing: 0;
336 line-height: 24px;
337 font-weight: 400;
338 margin-top: 4px;
339 }
340 }
341 }
342 </style>
...\ No newline at end of file ...\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!