askbot-dragon 1.6.22-beta → 1.6.23-beta

package/src/components/AiGuide.vue

@@ -1,469 +1,467 @@
-<template>
-    <div
-        id="ai-guide"
-        class="ai-guide"
-        :class="{
-            phoneClass: isPhone,
-            companyClass: isPC,
-        }"
-    >
-        <div class="ig-view-cli">
-            <!-- 描述 -->
-            <div
-                v-show="aiGuide.content.descriptionVisible && aiGuide.content.description !== ''"
-                class="ig-types-des"
-            >
-                <span v-html="aiGuide.content.description"></span>
-            </div>
-            <!-- 一级分类 -->
-            <div v-show="aiGuide.content.typesVisible" class="ig-types-f">
-                <span
-                    v-for="(fType, fTypeIndex) in aiGuide.content.options"
-                    :key="`f_${fTypeIndex}`"
-                    @click="changeFirstType(fTypeIndex)"
-                    :class="[
-                        'ig-types-f-cell',
-                        activeFirstTypeIndex === fTypeIndex
-                            ? 'ig-types-f-cell-active'
-                            : '',
-                    ]"
-                    >{{ fType.name }}</span
-                >
-            </div>
-            <!-- 二级分类 -->
-            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options[
-                        activeFirstTypeIndex
-                    ].types.length !== 0" class="ig-types-s">
-                <span
-                    v-for="(sType, sTypeIndex) in aiGuide.content.options[
-                        activeFirstTypeIndex
-                    ].types"
-                    :key="`s_${sTypeIndex}`"
-                    @click="changeLastType(sTypeIndex)"
-                    :class="[
-                        'ig-types-s-cell',
-                        activeSecondTypeIndex === sTypeIndex
-                            ? 'ig-types-s-cell-active'
-                            : '',
-                    ]"
-                    >{{ sType.name }}</span
-                >
-            </div>
-            <!-- 横向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 0 &&
-                    aiGuide.content.typesetting === 'horizontal'
-                "
-                class="ig-types-tags"
-            >
-                <span
-                    v-for="(
-                        intentCell, intentCellIndex
-                    ) in recommendIntentPageList(activeOtherObj)"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    :key="`i_${intentCellIndex}`"
-                    class="ig-types-tags-cell"
-                    >{{ intentCell.questionName }}</span
-                >
-            </div>
-            <!-- 竖向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 0 &&
-                    aiGuide.content.typesetting === 'vertical'
-                "
-                class="ig-types-list"
-            >
-                <span
-                    v-for="(
-                        intentCell, intentCellIndex
-                    ) in recommendIntentPageList(activeOtherObj)"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    :key="`i_${intentCellIndex}`"
-                    class="ig-types-list-cell"
-                >
-                    <span>{{ intentCell.questionName }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
-                ></span>
-            </div>
-            <!-- 横向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 1 &&
-                    aiGuide.content.typesetting === 'horizontal'
-                "
-                class="ig-types-tags"
-            >
-                <span
-                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    class="ig-types-tags-cell"
-                    >{{ intentCell.exampleQuestion }}</span
-                >
-            </div>
-            <!-- 竖向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 1 &&
-                    aiGuide.content.typesetting === 'vertical'
-                "
-                class="ig-types-list"
-            >
-                <span
-                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    class="ig-types-list-cell"
-                >
-                    <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
-                ></span>
-            </div>
-            <!-- 横向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 2 &&
-                    aiGuide.content.typesetting === 'horizontal'
-                "
-                class="ig-types-tags"
-            >
-                <span
-                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    class="ig-types-tags-cell"
-                    >{{ intentCell.exampleQuestion }}</span
-                >
-            </div>
-            <!-- 竖向排版 -->
-            <div
-                v-show="
-                    activeOtherObj.recommendType == 2 &&
-                    aiGuide.content.typesetting === 'vertical'
-                "
-                class="ig-types-list"
-            >
-                <span
-                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`"
-                    @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                    "
-                    class="ig-types-list-cell"
-                >
-                    <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
-                ></span>
-            </div>
-            <div
-                v-if="aiGuide.content.groupVisible && totalPage > 1"
-                class="ig-change-list"
-            >
-                <span @click="changeIntellectGuide" class="ig-change-list-btn">
-                    <i class="el-icon-refresh">换一批</i></span
-                >
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: "aiGuide",
-    data() {
-        return {
-            isPhone: false,
-            isPC: false,
-
-            activeFirstTypeIndex: 0,
-            activeSecondTypeIndex: 0,
-            activeOtherObj: {
-                name: "",
-                recommendType: 0, // 0 关联意图 1 高频推荐意图 2 智能推荐
-                recommendIntentList: [], // recommendType = 0
-                highFrequency: {
-                    // recommendType = 1
-                    rang: [], // 推荐范围
-                    number: 20, // 最多推荐问题数
-                    question: [],
-                },
-                intelligenceRecommend: {
-                    // recommendType = 2
-                    recommendStrategy: [0, 1], // 0 根据与当前用户咨询过相同意图的用户所问的意图进行推荐 1 根据当前用户部门的其他用户咨询过的意图进行推荐
-                    rang: [], // 推荐范围
-                    number: 20, // 最多推荐问题数
-                    question: [],
-                },
-            },
-            activePage: 1,
-            totalPage: 1,
-        };
-    },
-    props: {
-        aiGuide: Object,
-    },
-    beforeMount() {},
-    mounted() {
-        this.isMobile();
-        if (this.aiGuide.content.options[0].types.length === 0) {
-            this.activeOtherObj = this.aiGuide.content.options[0];
-        } else {
-            this.activeSecondTypeIndex = 0;
-            this.activeOtherObj = this.aiGuide.content.options[0].types[0];
-        }
-    },
-    methods: {
-        isMobile() {
-            let flag = navigator.userAgent.match(
-                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-            );
-            if (flag) {
-                this.isPhone = true;
-            } else {
-                this.isPC = true;
-            }
-        },
-        changeIntellectGuide() {
-            if (this.activePage === this.totalPage) {
-                this.activePage = 1;
-            } else {
-                this.activePage++;
-            }
-        },
-        changeFirstType(fTypeIndex) {
-            this.activeFirstTypeIndex = fTypeIndex;
-            if (this.aiGuide.content.options[fTypeIndex].types.length === 0) {
-                this.activeOtherObj = this.aiGuide.content.options[fTypeIndex];
-            } else {
-                this.activeSecondTypeIndex = 0;
-                this.activeOtherObj =
-                    this.aiGuide.content.options[fTypeIndex].types[0];
-            }
-            this.activePage = 1;
-        },
-        changeLastType(sTypeIndex) {
-            this.activeSecondTypeIndex = sTypeIndex;
-            this.activeOtherObj =
-                this.aiGuide.content.options[this.activeFirstTypeIndex].types[
-                    sTypeIndex
-                ];
-            this.activePage = 1;
-        },
-        // 根据当前分组数页数返回展示列表
-        recommendIntentPageList(obj) {
-            let list = [];
-            if (obj.recommendType === 0) {
-                list = obj.recommendIntentList;
-            }
-            if (obj.recommendType === 1) {
-                list = obj.highFrequency.question;
-            }
-            if (obj.recommendType === 2) {
-                list = obj.intelligenceRecommend.question;
-            }
-            let arr = [];
-            let len = 0;
-            if (list) {
-                len = list.length;
-
-                // 每组展示数
-                let groupNumber = this.aiGuide.content.groupNumber;
-
-                this.totalPage = Math.ceil(len / groupNumber);
-                if (this.aiGuide.content.groupVisible) {
-                    arr = list.slice(
-                        (this.activePage - 1) * groupNumber,
-                        this.activePage * groupNumber
-                    );
-                } else {
-                    arr = list;
-                }
-            }
-            return arr;
-        },
-        sendAiGuideInfo(recommendType, cell) {
-          console.log("组件-312-3", recommendType, cell);
-          this.$emit('sendAiGuide', recommendType, cell);
-        },
-    },
-};
-</script>
-
-<style scoped lang="less">
-.ig-view-cli {
-    // background: #fbfcfd;
-    font-size: 0.9em;
-    border-radius: 5px;
-    position: relative;
-    .ig-view-example {
-        position: absolute;
-        right: -10px;
-        top: -10px;
-        opacity: 0.5;
-        img {
-            height: 50px;
-        }
-    }
-    .ig-types-des {
-        padding: 12px 16px 0px;
-        text-align: left;
-    }
-    .ig-types-f {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        padding: 4px 8px;
-        .ig-types-f-cell {
-            height: 1.8em;
-            line-height: 1.8em;
-            padding: 0 12px;
-            margin-left: 5px;
-            margin-right: 5px;
-            margin-top: 4px;
-            background: #ffffff;
-            border: 1px solid #e0e6f7;
-            border-radius: 1em;
-            color: #a3adc6;
-            cursor: pointer;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            &:hover {
-                border: 1px solid #366aff;
-                color: #366aff;
-            }
-            &-active {
-                background-color: #366aff;
-                border: 1px solid #366aff;
-                color: white;
-            }
-        }
-        .ig-types-f-cell-active {
-            &:hover {
-                color: white;
-            }
-        }
-    }
-    .ig-types-s {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        margin: 0px 16px 4px;
-        border-bottom: solid 1px #e0e6f7;
-        .ig-types-s-cell {
-            height: 2.2em;
-            line-height: 2.2em;
-            margin-right: 18px;
-            color: #b2c2d8;
-            cursor: pointer;
-            margin-bottom: -1px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            &:hover {
-                color: #366aff;
-            }
-            &-active {
-                border-bottom: 2px solid #366aff;
-                color: #366aff;
-            }
-        }
-    }
-    .ig-types-tags {
-        margin: 0 16px;
-        padding: 0 0 12px;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        .ig-types-tags-cell {
-            line-height: 1.4em;
-            padding: 2px 8px;
-            margin-right: 6px;
-            margin-top: 4px;
-            color: #366aff;
-            background: #ffffff;
-            border: 1px solid #a1b9ff;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-    }
-    .ig-high-frequency-empty {
-        margin: 6px 15px;
-        height: 40px;
-        line-height: 40px;
-        background: #fff8f4;
-        border-radius: 5px;
-        color: #ff9555;
-        padding: 0 12px;
-        text-align: left;
-    }
-    .ig-types-list {
-        margin: 0 16px;
-        padding: 0 0 8px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        .ig-types-list-cell {
-            line-height: 1.1em;
-            padding: 8px 0;
-            overflow: hidden;
-            display: flex;
-            justify-content: space-between;
-            color: #366aff;
-            cursor: pointer;
-            align-items: center;
-            text-align: left;
-            span {
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                i {
-                    // margin-top: 12px;
-                }
-            }
-        }
-    }
-    .ig-change-list {
-        padding: 8px 0;
-        margin-top: 4px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        border-top: 1px solid #eeeeee;
-        .ig-change-list-btn {
-            font-weight: 600;
-            color: #366aff;
-            cursor: pointer;
-        }
-    }
-}
+<template>
+    <div
+        id="ai-guide"
+        class="ai-guide"
+        :class="{
+            phoneClass: isPhone,
+            companyClass: isPC,
+        }"
+    >
+        <div class="ig-view-cli">
+            <!-- 描述 -->
+            <div
+                v-show="aiGuide.content.descriptionVisible && aiGuide.content.description !== ''"
+                class="ig-types-des"
+            >
+                <span v-html="aiGuide.content.description"></span>
+            </div>
+            <!-- 一级分类 -->
+            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options && aiGuide.content.options.length > 0" class="ig-types-f">
+                <span
+                    v-for="(fType, fTypeIndex) in aiGuide.content.options"
+                    :key="`f_${fTypeIndex}`"
+                    @click="changeFirstType(fTypeIndex)"
+                    :class="[
+                        'ig-types-f-cell',
+                        activeFirstTypeIndex === fTypeIndex
+                            ? 'ig-types-f-cell-active'
+                            : '',
+                    ]"
+                    >{{ fType.name }}</span
+                >
+            </div>
+            <!-- 二级分类 -->
+           <div v-if="aiGuide.content.typesVisible && aiGuide.content.options[activeFirstTypeIndex] && aiGuide.content.options[activeFirstTypeIndex].types && aiGuide.content.options[activeFirstTypeIndex].types.length !== 0" class="ig-types-s">
+                <span
+                    v-for="(sType, sTypeIndex) in aiGuide.content.options[
+                        activeFirstTypeIndex
+                    ].types"
+                    :key="`s_${sTypeIndex}`"
+                    @click="changeLastType(sTypeIndex)"
+                    :class="[
+                        'ig-types-s-cell',
+                        activeSecondTypeIndex === sTypeIndex
+                            ? 'ig-types-s-cell-active'
+                            : '',
+                    ]"
+                    >{{ sType.name }}</span
+                >
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 0 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(
+                        intentCell, intentCellIndex
+                    ) in recommendIntentPageList(activeOtherObj)"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    :key="`i_${intentCellIndex}`"
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.questionName }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 0 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(
+                        intentCell, intentCellIndex
+                    ) in recommendIntentPageList(activeOtherObj)"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    :key="`i_${intentCellIndex}`"
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.questionName }}</span>
+                    <span><i class="el-icon-arrow-right"></i></span
+                ></span>
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 1 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.exampleQuestion }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 1 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.exampleQuestion }}</span>
+                    <span><i class="el-icon-arrow-right"></i></span
+                ></span>
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 2 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.exampleQuestion }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 2 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.exampleQuestion }}</span>
+                    <span><i class="el-icon-arrow-right"></i></span
+                ></span>
+            </div>
+            <div
+                v-if="aiGuide.content.groupVisible && totalPage > 1"
+                class="ig-change-list"
+            >
+                <span @click="changeIntellectGuide" class="ig-change-list-btn">
+                    <i class="el-icon-refresh">换一批</i></span
+                >
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "aiGuide",
+    data() {
+        return {
+            isPhone: false,
+            isPC: false,
+
+            activeFirstTypeIndex: 0,
+            activeSecondTypeIndex: 0,
+            activeOtherObj: {
+                name: "",
+                recommendType: 0, // 0 关联意图 1 高频推荐意图 2 智能推荐
+                recommendIntentList: [], // recommendType = 0
+                highFrequency: {
+                    // recommendType = 1
+                    rang: [], // 推荐范围
+                    number: 20, // 最多推荐问题数
+                    question: [],
+                },
+                intelligenceRecommend: {
+                    // recommendType = 2
+                    recommendStrategy: [0, 1], // 0 根据与当前用户咨询过相同意图的用户所问的意图进行推荐 1 根据当前用户部门的其他用户咨询过的意图进行推荐
+                    rang: [], // 推荐范围
+                    number: 20, // 最多推荐问题数
+                    question: [],
+                },
+            },
+            activePage: 1,
+            totalPage: 1,
+        };
+    },
+    props: {
+        aiGuide: Object,
+    },
+    beforeMount() {},
+    mounted() {
+        this.isMobile();
+        if (this.aiGuide.content.options[0] && this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types.length === 0) {
+            this.activeOtherObj = this.aiGuide.content.options[0];
+        } else {
+            this.activeSecondTypeIndex = 0;
+            this.activeOtherObj = this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types[0] ? this.aiGuide.content.options[0].types[0] : [];
+        }
+    },
+    methods: {
+        isMobile() {
+            let flag = navigator.userAgent.match(
+                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+            );
+            if (flag) {
+                this.isPhone = true;
+            } else {
+                this.isPC = true;
+            }
+        },
+        changeIntellectGuide() {
+            if (this.activePage === this.totalPage) {
+                this.activePage = 1;
+            } else {
+                this.activePage++;
+            }
+        },
+        changeFirstType(fTypeIndex) {
+            this.activeFirstTypeIndex = fTypeIndex;
+            if (this.aiGuide.content.options[fTypeIndex].types.length === 0) {
+                this.activeOtherObj = this.aiGuide.content.options[fTypeIndex];
+            } else {
+                this.activeSecondTypeIndex = 0;
+                this.activeOtherObj =
+                    this.aiGuide.content.options[fTypeIndex].types[0];
+            }
+            this.activePage = 1;
+        },
+        changeLastType(sTypeIndex) {
+            this.activeSecondTypeIndex = sTypeIndex;
+            this.activeOtherObj =
+                this.aiGuide.content.options[this.activeFirstTypeIndex].types[
+                    sTypeIndex
+                ];
+            this.activePage = 1;
+        },
+        // 根据当前分组数页数返回展示列表
+        recommendIntentPageList(obj) {
+            let list = [];
+            if (obj.recommendType === 0) {
+                list = obj.recommendIntentList;
+            }
+            if (obj.recommendType === 1) {
+                list = obj.highFrequency.question;
+            }
+            if (obj.recommendType === 2) {
+                list = obj.intelligenceRecommend.question;
+            }
+            let arr = [];
+            let len = 0;
+            if (list) {
+                len = list.length;
+
+                // 每组展示数
+                let groupNumber = this.aiGuide.content.groupNumber;
+
+                this.totalPage = Math.ceil(len / groupNumber);
+                if (this.aiGuide.content.groupVisible) {
+                    arr = list.slice(
+                        (this.activePage - 1) * groupNumber,
+                        this.activePage * groupNumber
+                    );
+                } else {
+                    arr = list;
+                }
+            }
+            return arr;
+        },
+        sendAiGuideInfo(recommendType, cell) {
+          console.log("组件-312-3", recommendType, cell);
+          this.$emit('sendAiGuide', recommendType, cell);
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+.ig-view-cli {
+    // background: #fbfcfd;
+    font-size: 0.9em;
+    border-radius: 5px;
+    position: relative;
+    .ig-view-example {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        opacity: 0.5;
+        img {
+            height: 50px;
+        }
+    }
+    .ig-types-des {
+        padding: 12px 16px 0px;
+        text-align: left;
+    }
+    .ig-types-f {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        padding: 4px 8px;
+        .ig-types-f-cell {
+            height: 1.8em;
+            line-height: 1.8em;
+            padding: 0 12px;
+            margin-left: 5px;
+            margin-right: 5px;
+            margin-top: 4px;
+            background: #ffffff;
+            border: 1px solid #e0e6f7;
+            border-radius: 1em;
+            color: #a3adc6;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:hover {
+                border: 1px solid #366aff;
+                color: #366aff;
+            }
+            &-active {
+                background-color: #366aff;
+                border: 1px solid #366aff;
+                color: white;
+            }
+        }
+        .ig-types-f-cell-active {
+            &:hover {
+                color: white;
+            }
+        }
+    }
+    .ig-types-s {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        margin: 0px 16px 4px;
+        border-bottom: solid 1px #e0e6f7;
+        .ig-types-s-cell {
+            height: 2.2em;
+            line-height: 2.2em;
+            margin-right: 18px;
+            color: #b2c2d8;
+            cursor: pointer;
+            margin-bottom: -1px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:hover {
+                color: #366aff;
+            }
+            &-active {
+                border-bottom: 2px solid #366aff;
+                color: #366aff;
+            }
+        }
+    }
+    .ig-types-tags {
+        margin: 0 16px;
+        padding: 0 0 12px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ig-types-tags-cell {
+            line-height: 1.4em;
+            padding: 2px 8px;
+            margin-right: 6px;
+            margin-top: 4px;
+            color: #366aff;
+            background: #ffffff;
+            border: 1px solid #a1b9ff;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    }
+    .ig-high-frequency-empty {
+        margin: 6px 15px;
+        height: 40px;
+        line-height: 40px;
+        background: #fff8f4;
+        border-radius: 5px;
+        color: #ff9555;
+        padding: 0 12px;
+        text-align: left;
+    }
+    .ig-types-list {
+        margin: 0 16px;
+        padding: 0 0 8px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        .ig-types-list-cell {
+            line-height: 1.1em;
+            padding: 8px 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+            color: #366aff;
+            cursor: pointer;
+            align-items: center;
+            text-align: left;
+            span {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                i {
+                    // margin-top: 12px;
+                }
+            }
+        }
+    }
+    .ig-change-list {
+        padding: 8px 0;
+        margin-top: 4px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-top: 1px solid #eeeeee;
+        .ig-change-list-btn {
+            font-weight: 600;
+            color: #366aff;
+            cursor: pointer;
+        }
+    }
+}
 </style>