style.less 5.67 KB
Newer Older
xuchaozou's avatar
xuchaozou committed
1 2 3 4 5 6 7
@imageRoot : "@/assets/images/soundAi/";

.getImage(@imageName) {
    background: url("@{imageRoot}/@{imageName}") no-repeat center center;
    background-size: 100% 100%;
}

xuchaozou's avatar
xuchaozou committed
8 9 10
.container {
    position: absolute;
    right: 80px;
xuchaozou's avatar
xuchaozou committed
11 12 13
    width: 395px;
    height: 435px;
    bottom: -150px;
xuchaozou's avatar
xuchaozou committed
14 15
    border-radius: 5px;
    z-index: 10;
xuchaozou's avatar
xuchaozou committed
16 17
    .getImage("框.png");
    padding: 15px 20px;
xuchaozou's avatar
xuchaozou committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

    .main {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .header {
            width: 100%;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            padding-left: 10px;
xuchaozou's avatar
xuchaozou committed
33 34
            height: 50px;
            // border-bottom: 1px solid #eee;
xuchaozou's avatar
xuchaozou committed
35 36 37
            justify-content: space-between;

            >p {
xuchaozou's avatar
xuchaozou committed
38 39 40 41
                margin: 10px 0 0 65px;
                position: relative;
                letter-spacing: 0.5px;
                color: #fff;
xuchaozou's avatar
xuchaozou committed
42

xuchaozou's avatar
xuchaozou committed
43 44 45 46 47 48 49 50 51 52
                &::before {
                    content: "";
                    position: absolute;
                    left: -35px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 28px;
                    height: 30px;
                    .getImage("录音icon.png");
                }
xuchaozou's avatar
xuchaozou committed
53 54 55 56
            }

            .help {
                position: relative;
xuchaozou's avatar
xuchaozou committed
57 58 59
                margin-right: 30px;
                margin-top: 5px;

xuchaozou's avatar
xuchaozou committed
60
                .helpIcon {
xuchaozou's avatar
xuchaozou committed
61 62 63 64 65
                    display: flex;
                    width: 22px;
                    height: 22px;
                    .getImage("帮助.png");
                }
xuchaozou's avatar
xuchaozou committed
66 67 68 69 70 71 72 73 74 75

                &:hover {
                    cursor: pointer;

                    .toolTipContent {
                        display: block;
                    }
                }

                .toolTipContent {
邹绪超's avatar
邹绪超 committed
76 77 78 79 80
                    display: flex;
                    flex-direction: column;
                    .toolTipTitle{
                        margin-bottom: 5px;
                        white-space: nowrap;
xuchaozou's avatar
xuchaozou committed
81
                    }
邹绪超's avatar
邹绪超 committed
82 83 84 85 86 87
                    .toolTipWrapper{
                        max-height: 200px;
                        overflow-y: auto;
                        >ul{
                            list-style: none;
                            flex-direction: column;
xuchaozou's avatar
xuchaozou committed
88
                            display: flex;
邹绪超's avatar
邹绪超 committed
89 90 91 92 93
                            max-width: 207px;
                            >li{
                                margin-bottom: 5px;
                                width: 100%;
                            }
xuchaozou's avatar
xuchaozou committed
94 95
                        }
                    }
邹绪超's avatar
邹绪超 committed
96
         
xuchaozou's avatar
xuchaozou committed
97 98 99 100 101 102 103
                }

            }

        }

        .content {
xuchaozou's avatar
xuchaozou committed
104
            height: calc(100% - 100px);
xuchaozou's avatar
xuchaozou committed
105
            overflow-y: auto;
xuchaozou's avatar
xuchaozou committed
106 107
            padding: 0 10px;
            min-height: 0;
xuchaozou's avatar
xuchaozou committed
108 109 110 111

            .display {
                width: 100%;
                height: auto;
xuchaozou's avatar
xuchaozou committed
112
                // background-color: #eee;
xuchaozou's avatar
xuchaozou committed
113 114 115 116 117 118 119

                .ul {
                    padding: 5px 5px 15px 5px;
                    list-style: none;
                    display: flex;
                    flex-direction: column;

xuchaozou's avatar
xuchaozou committed
120 121 122 123 124 125 126 127 128
                    .interval {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 10px 0;
                        color: #fff;
                    }

xuchaozou's avatar
xuchaozou committed
129 130 131 132 133
                    .list {
                        width: 100%;
                        margin-bottom: 15px;
                        display: flex;
                        flex-direction: row;
xuchaozou's avatar
xuchaozou committed
134 135 136 137
                        justify-content: space-between;

                        &[data-role="user"] {
                            flex-direction: row-reverse;
xuchaozou's avatar
xuchaozou committed
138

xuchaozou's avatar
xuchaozou committed
139 140 141 142 143 144 145 146
                            .avater {
                                background-image: url("@{imageRoot}/头像.png");
                            }

                            .aiContent {
                                margin-right: 5px;
                                background: #347EE1;
                            }
xuchaozou's avatar
xuchaozou committed
147 148
                        }

xuchaozou's avatar
xuchaozou committed
149 150 151 152 153 154 155 156 157 158
                        .avater {
                            width: 48px;
                            height: 48px;
                            border-radius: 50%;
                            overflow: hidden;
                            .getImage("熊猫头像.png");

                        }


xuchaozou's avatar
xuchaozou committed
159 160
                        .aiContent {
                            flex: 1;
xuchaozou's avatar
xuchaozou committed
161 162
                            margin-left: 5px;
                            min-width: 0;
xuchaozou's avatar
xuchaozou committed
163 164 165
                            color: #000;
                            white-space: pre-wrap;
                            position: relative;
xuchaozou's avatar
xuchaozou committed
166 167 168 169
                            background: #5B84B6;
                            border-radius: 5px;
                            color: #fff;
                            padding: 6px;
xuchaozou's avatar
xuchaozou committed
170 171 172 173 174

                            .aiText {
                                margin-bottom: 0;
                            }

xuchaozou's avatar
xuchaozou committed
175 176 177 178 179 180 181 182 183
                            // .time {
                            //     position: absolute;
                            //     right: 0;
                            //     bottom: 0;
                            //     font-size: 12px;
                            //     color: #797070;
                            //     border-radius: 2px;
                            //     // background-color: #dbd3d3;
                            // }
xuchaozou's avatar
xuchaozou committed
184 185 186 187
                        }
                    }
                }
            }
xuchaozou's avatar
xuchaozou committed
188

xuchaozou's avatar
xuchaozou committed
189
        }
xuchaozou's avatar
xuchaozou committed
190 191 192 193 194 195 196 197 198 199

    }

    .pandaIcon {
        position: absolute;
        right: -78px;
        bottom: 10px;
        .getImage("站立小熊猫.png");
        width: 93px;
        height: 142px;
xuchaozou's avatar
xuchaozou committed
200 201
    }
}