diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue index 4e092e47b..10e5c8926 100644 --- a/resources/assets/js/pages/manage/components/DialogView.vue +++ b/resources/assets/js/pages/manage/components/DialogView.vue @@ -67,12 +67,17 @@ -
+

                     
@@ -522,6 +527,10 @@ export default {
                 dialog_id: this.msgData.dialog_id,
                 msgData: this.msgData,
             }
+        },
+
+        unfoldWordChain(e){
+            e.target.parentNode?.parentNode?.classList.add('expand')
         }
     }
 }
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 6d629c746..e29ce537d 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -963,6 +963,13 @@
                                 margin-top: 20px;
                                 li{
                                     margin-top: 5px;
+                                    .expand{
+                                        cursor: pointer;
+                                        color: #0bc037;
+                                    }
+                                    .shrink{
+                                        display: none;
+                                    }
                                 }
                                 li.participate{
                                     cursor: pointer;
@@ -973,6 +980,14 @@
                                         margin-left: 2px;
                                     }
                                 }
+                                &.expand{
+                                    .expand{
+                                        display: none;
+                                    }
+                                    .shrink{
+                                        display: block;
+                                    }
+                                }
                             }
                         }
                     }
@@ -1227,6 +1242,11 @@
 
                             .content-word-chain{
                                 ul{
+                                    li{
+                                        .expand{
+                                            color: #23241f;
+                                        }
+                                    }
                                     li.participate{
                                         color: #23241f;
                                     }
diff --git a/resources/assets/sass/pages/components/word-chain.scss b/resources/assets/sass/pages/components/word-chain.scss
new file mode 100644
index 000000000..073dc275b
--- /dev/null
+++ b/resources/assets/sass/pages/components/word-chain.scss
@@ -0,0 +1,137 @@
+.word-chain-wrapper {
+    .ivu-modal-body{
+        max-height: calc(100vh - 365px);
+        overflow: auto;
+        padding-top: 0 !important;
+        padding-right: 0 !important;
+    }
+    .chain-modal-header {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        font-weight: 500;
+
+        .chain-modal-close {
+            color: $primary-text-color;
+        }
+
+        .chain-modal-title {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 100px;
+            right: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            > span {
+                font-size: 16px;
+                color: $primary-title-color;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .chain-modal-submit {
+            color: $primary-color;
+            display: flex;
+            align-items: center;
+
+            .submit-loading {
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
+            }
+
+            &.disabled{
+                color: #9c9c9c;
+            }
+        }
+    }
+    .word-chain-body{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        max-height: calc(100vh - 370px);
+        .source{
+            margin-right: 32px;
+            span{
+                color: #84C56A;
+            }
+        }
+        .initiate{
+            padding: 10px 0;
+            gap: 5px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow-y: auto;
+            min-height: 40px;
+            margin-right: 32px;
+            padding-bottom: 20px;
+            .ivu-input{
+                border-color: #fff !important;
+            }
+            .avatar-wrapper{
+                margin: 0 4px 4px;
+            }
+            >span,>div{
+                float: left;
+            }
+        }
+        .textarea{
+            padding-right: 32px;
+        }
+        ul{
+            margin: 20px 0;
+            list-style-type:none;
+            flex: 1;
+            overflow: auto;
+            padding-right: 32px;
+            li{
+                display: flex;
+                gap: 10px;
+                padding: 5px 0;
+                span{
+                    min-width: 30px;
+                    height: 30px;
+                    line-height: 30px;
+                    margin-top: 2px;
+                    background-color: #f2f2f2;
+                    border-radius: 100%;
+                    text-align: center;
+                    font-size: 12px;
+                    color: #7f7f7f;
+                }
+                &.add{
+                    .taskfont{
+                        font-size: 30px;
+                        cursor: pointer;
+                        line-height: 30px;
+                        user-select: none;
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+body.window-portrait {
+    .word-chain-wrapper {
+        .ivu-modal-body{
+            padding-top: 10px !important;
+            max-height: 100%;
+        }
+        .word-chain-body{
+            max-height: 100%;
+        }
+    }
+    @media (max-width: 640px) {
+        .word-chain-wrapper {
+
+        }
+    }
+}