|
@@ -1,24 +1,17 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class='x_card_window'>
|
|
|
|
|
- <a-button shape='circle' @click='scrollCards(-1)'>
|
|
|
|
|
|
|
+ <div class="x_card_window">
|
|
|
|
|
+ <a-button shape="circle" @click="scrollCards(-1)">
|
|
|
<icon-left />
|
|
<icon-left />
|
|
|
</a-button>
|
|
</a-button>
|
|
|
- <div class='x_card'>
|
|
|
|
|
- <a-card
|
|
|
|
|
- v-for='(item, index) in cardItems'
|
|
|
|
|
- :key='index'
|
|
|
|
|
- class='card-item'
|
|
|
|
|
- hoverable
|
|
|
|
|
- @click='handleCardClick(item)'
|
|
|
|
|
- >
|
|
|
|
|
- <div class='card-content'>
|
|
|
|
|
- <img :src='`../../assets/image/x-card-png/${index + 1}.png`' alt=''
|
|
|
|
|
- class='card-image'>
|
|
|
|
|
- <div class='card-text'>{{ item.name }}</div>
|
|
|
|
|
|
|
+ <div class="x_card">
|
|
|
|
|
+ <div v-for="(item, index) in cardItems" :key="index" class="card-item" hoverable @click="handleCardClick(item)">
|
|
|
|
|
+ <div class="card-content">
|
|
|
|
|
+ <img :src="getImageSrc(index)" alt="" class="card-image" />
|
|
|
|
|
+ <div class="card-text">{{ item.name }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </a-card>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <a-button shape='circle' @click='scrollCards(1)'>
|
|
|
|
|
|
|
+ <a-button shape="circle" @click="scrollCards(1)">
|
|
|
<icon-right />
|
|
<icon-right />
|
|
|
</a-button>
|
|
</a-button>
|
|
|
</div>
|
|
</div>
|
|
@@ -28,7 +21,6 @@
|
|
|
import { getConfigField } from '../../config/index';
|
|
import { getConfigField } from '../../config/index';
|
|
|
import { useInject } from '../../base/store/use-inject';
|
|
import { useInject } from '../../base/store/use-inject';
|
|
|
|
|
|
|
|
-
|
|
|
|
|
const baseurl = getConfigField('API_BASE_URL');
|
|
const baseurl = getConfigField('API_BASE_URL');
|
|
|
const cardItems = getConfigField('featureConfigs');
|
|
const cardItems = getConfigField('featureConfigs');
|
|
|
|
|
|
|
@@ -40,20 +32,19 @@ const scrollCards = (direction) => {
|
|
|
|
|
|
|
|
const handleCardClick = (item) => {
|
|
const handleCardClick = (item) => {
|
|
|
const store = useInject();
|
|
const store = useInject();
|
|
|
-
|
|
|
|
|
- const iframe_id = item.id;
|
|
|
|
|
- const type = item.type;
|
|
|
|
|
|
|
+ const { id: iframe_id, type, name } = item;
|
|
|
|
|
|
|
|
if (type === 'workflow') {
|
|
if (type === 'workflow') {
|
|
|
- const workflowUrl = `${baseurl}/app/${iframe_id}/workflow`;
|
|
|
|
|
- window.open(workflowUrl, '_blank');
|
|
|
|
|
|
|
+ window.open(`${baseurl}/app/${iframe_id}/workflow`, '_blank');
|
|
|
} else if (type === 'link') {
|
|
} else if (type === 'link') {
|
|
|
window.open(iframe_id, '_blank');
|
|
window.open(iframe_id, '_blank');
|
|
|
} else {
|
|
} else {
|
|
|
- store.updateUserPage(iframe_id, item.name);
|
|
|
|
|
- store.setSelectedFeature(item.name);
|
|
|
|
|
|
|
+ store.updateUserPage(iframe_id, name);
|
|
|
|
|
+ store.setSelectedFeature(name);
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+const getImageSrc = (index) => `../../assets/image/x-card-png/${index + 1}.png`;
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
@@ -81,17 +72,22 @@ const handleCardClick = (item) => {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
|
|
+ color: #333;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+.card-item:hover {
|
|
|
|
|
+ background-color: #06aea2;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
.card-content {
|
|
.card-content {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -103,7 +99,6 @@ const handleCardClick = (item) => {
|
|
|
|
|
|
|
|
.card-text {
|
|
.card-text {
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
- color: #333;
|
|
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
}
|
|
}
|
|
|
|
|
|