update

package-lock.json

@@ -13,6 +13,7 @@
         "clipboard": "^2.0.10",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
+        "echarts-wordcloud": "^2.1.0",
         "element-china-area-data": "^5.0.2",
         "element-ui": "^2.15.1",
         "file-saver": "^2.0.5",
@@ -34,6 +35,7 @@
         "language-hk-loader": "^1.0.1",
         "markdown-it": "^14.1.0",
         "pdfjs-dist": "^2.5.207",
+        "pptxgenjs": "^3.12.0",
         "qrcodejs2": "^0.0.2",
         "qs": "^6.10.1",
         "relation-graph": "^1.1.0",
@@ -5255,6 +5257,14 @@
         "zrender": "5.4.3"
       }
     },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -7173,6 +7183,11 @@
         "npm": ">=1.3.7"
       }
     },
+    "node_modules/https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
+    },
     "node_modules/https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/https-browserify/download/https-browserify-1.0.0.tgz",
@@ -7271,6 +7286,20 @@
       "resolved": "https://registry.npmmirror.com/image-conversion/-/image-conversion-2.1.1.tgz",
       "integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
     },
+    "node_modules/image-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-1.1.1.tgz",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
@@ -13895,6 +13924,25 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/pptxgenjs": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmmirror.com/pptxgenjs/-/pptxgenjs-3.12.0.tgz",
+      "integrity": "sha512-ZozkYKWb1MoPR4ucw3/aFYlHkVIJxo9czikEclcUVnS4Iw/M+r+TEwdlB3fyAWO9JY1USxJDt0Y0/r15IR/RUA==",
+      "dependencies": {
+        "@types/node": "^18.7.3",
+        "https": "^1.0.0",
+        "image-size": "^1.0.0",
+        "jszip": "^3.7.1"
+      }
+    },
+    "node_modules/pptxgenjs/node_modules/@types/node": {
+      "version": "18.19.34",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.19.34.tgz",
+      "integrity": "sha512-eXF4pfBNV5DAMKGbI02NnDtWrQ40hAN558/2vvS4gMpMIxaf6JmD7YjnZbq0Q9TDSSkKBamime8ewRoomHdt4g==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz",
@@ -14123,6 +14171,14 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
@@ -16494,8 +16550,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "peer": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/union-value": {
       "version": "1.0.1",
@@ -23307,6 +23362,12 @@
         "zrender": "5.4.3"
       }
     },
+    "echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "requires": {}
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -24906,6 +24967,11 @@
         "sshpk": "^1.7.0"
       }
     },
+    "https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
+    },
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/https-browserify/download/https-browserify-1.0.0.tgz",
@@ -24992,6 +25058,14 @@
       "resolved": "https://registry.npmmirror.com/image-conversion/-/image-conversion-2.1.1.tgz",
       "integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
     },
+    "image-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-1.1.1.tgz",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+      "requires": {
+        "queue": "6.0.2"
+      }
+    },
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
@@ -30405,6 +30479,27 @@
         }
       }
     },
+    "pptxgenjs": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmmirror.com/pptxgenjs/-/pptxgenjs-3.12.0.tgz",
+      "integrity": "sha512-ZozkYKWb1MoPR4ucw3/aFYlHkVIJxo9czikEclcUVnS4Iw/M+r+TEwdlB3fyAWO9JY1USxJDt0Y0/r15IR/RUA==",
+      "requires": {
+        "@types/node": "^18.7.3",
+        "https": "^1.0.0",
+        "image-size": "^1.0.0",
+        "jszip": "^3.7.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "18.19.34",
+          "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.19.34.tgz",
+          "integrity": "sha512-eXF4pfBNV5DAMKGbI02NnDtWrQ40hAN558/2vvS4gMpMIxaf6JmD7YjnZbq0Q9TDSSkKBamime8ewRoomHdt4g==",
+          "requires": {
+            "undici-types": "~5.26.4"
+          }
+        }
+      }
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz",
@@ -30585,6 +30680,14 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "requires": {
+        "inherits": "~2.0.3"
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
@@ -32564,8 +32667,7 @@
     "undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "peer": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "union-value": {
       "version": "1.0.1",

package.json

@@ -15,6 +15,7 @@
     "clipboard": "^2.0.10",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
+    "echarts-wordcloud": "^2.1.0",
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.1",
     "file-saver": "^2.0.5",
@@ -36,6 +37,7 @@
     "language-hk-loader": "^1.0.1",
     "markdown-it": "^14.1.0",
     "pdfjs-dist": "^2.5.207",
+    "pptxgenjs": "^3.12.0",
     "qrcodejs2": "^0.0.2",
     "qs": "^6.10.1",
     "relation-graph": "^1.1.0",

src/components/pages/aiAddCourse/aiCreateDialog.vue

@@ -1,51 +1,93 @@
 <template>
-    <el-dialog title="AI生成" :visible.sync="dialogVisibleAiCreate" :append-to-body="true" width="650px" :before-close="handleClose"
-        class="dialog_diy">
-        <div style="height: 100%;padding:15px">
-            <div class="t_box">
+    <el-dialog title="AI生成PPT" :visible.sync="dialogVisibleAiCreate" :append-to-body="true" width="700px"
+        :before-close="handleClose" class="dialog_diy">
+        <div style="height: 500px;padding:15px" v-loading="loading">
+            <!-- <div class="t_box">
                 <span>选择：</span>
-                <el-radio-group v-model="radio">
+                <el-radio-group v-model="radio" @change="changeRadio">
                     <el-radio :label="0">PPT</el-radio>
                     <el-radio :label="1">教案</el-radio>
                     <el-radio :label="2">视频</el-radio>
                 </el-radio-group>
-            </div>
-            <div class="t_box">
+            </div> -->
+            <!-- <div class="t_box">
                 <span>提示词：</span>
                 <textarea rows="10" class="binfo_input binfo_textarea" cols placeholder="请输入提示词"
                     v-model="detail"></textarea>
-            </div>
-            
+            </div> -->
+            <wOffice v-if="url" :url="url"></wOffice>
         </div>
         <span slot="footer" class="dialog-footer">
+            <el-button @click="aiGet" type="primary">重新生成</el-button>
             <el-button @click="confirm" type="primary">确 定</el-button>
             <el-button @click="close">关 闭</el-button>
         </span>
     </el-dialog>
 </template>
-  
+
 <script>
+import Pptxgen from "pptxgenjs"
+import wOffice from '../components/wOffice.vue'
 
 export default {
+    components: {
+        wOffice,
+    },
     props: {
         dialogVisibleAiCreate: {
             type: Boolean,
             default: false
         },
+        courseName: {
+            type: String,
+            default: ""
+        }
     },
+    // 根据用户给你的参考资料
     data() {
         return {
+            userid: this.$route.query.userid,
             radio: 0,
-            detail: ""
+            aiJson: {
+                ppt: `## 任务
+请生成关于${this.courseName}，为教师生成这节课的教学ppt，页数在20页左右。PPT的内容主要是讲解该课程中所有可能涉及到的知识点。
+
+## 工作流
+1. 从用户提供的参考资料中提取10个最重要的知识点（知识点水平限制在小学和初中），并输出。
+2. 针对10个知识点中的每个，你使用1~3页ppt详细的对知识点进行讲解。你的讲解词应该在100token左右
+3. 讲解完所有知识点后，再根据知识点出5道单选题（放在5页ppt中）
+
+## 限制
+- 你不能输出错误的知识，如果你实在不清楚，输出“对不起，我不确定”
+- 你不能输出违反伦理的内容`,
+                word: '',
+                video: ''
+            },
+            aiUrl: {
+                ppt: '',
+                word: '',
+                video: ''
+            },
+            detail: "",
+            loading: false,
+            url: "",
+            uJson: {}
         }
     },
-    watch:{
+    watch: {
         dialogVisibleAiCreate(newValue, oldValue) {
-            if(newValue){
-                this.text = JSON.parse(JSON.stringify(this.aiText))
-                if(this.clickType == 2){
-                    this.confirm();
-                }
+            if (newValue) {
+                // if (this.radio == 0) {
+                    this.detail = this.aiJson.ppt
+                // }
+                // if (this.radio == 1) {
+                //     this.detail = this.aiJson.word
+                // }
+                // if (this.radio == 2) {
+                //     this.detail = this.aiJson.video
+                // }
+                // this.loading = false
+                this.aiGet()
             }
         },
     },
@@ -57,14 +99,194 @@ export default {
         close() {
             this.$emit('update:dialogVisibleAiCreate', false)
         },
-        confirm(){
-            this.$emit("aiConfirm",this.text);
-            this.$emit('update:dialogVisibleAiCreate', false)
-        }
+        confirm() {
+            if(this.url){
+                this.$emit('createAiPpt', this.uJson)
+            }else {
+                this.$message.error('请先生成ppt');
+            }
+        },
+        changeRadio() {
+            if (this.radio == 0) {
+                this.detail = this.aiJson.ppt
+            }
+            if (this.radio == 1) {
+                this.detail = this.aiJson.word
+            }
+            if (this.radio == 2) {
+                this.detail = this.aiJson.video
+            }
+        },
+        aiGet() {
+            if(this.loading){
+                this.$message.error('正在生成中，请稍后');
+                return;
+            }
+            this.url = ''
+            this.uJson = {}
+            let _this = this
+            let message = ''
+            if (_this.radio == 0) {
+                message = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
+
+${this.detail}
+
+## 要求
+根据Format example的要求返回要以数组的格式
+
+## Format example
+[{"page": "页码（数字）","title": "标题","task": "对应教学任务：依据用户输入的参考资料而定，如果用户未提供则不输出","points": "知识点讲解：针对知识点的详细讲解，你的语气应该让小学或初中的学生清晰易懂的讲解。你的讲解词在100 token左右。请尽可能的详细，这对我很重要。"}]`
+            } else if (_this.radio == 1) {
+
+            } else if (_this.radio == 2) {
+
+            }
+            let params = JSON.stringify({
+                // "model": "Chat",
+                model: 'gpt-3.5-turbo',
+                temperature: 0,
+                max_tokens: 4096,
+                top_p: 1,
+                frequency_penalty: 0,
+                presence_penalty: 0,
+                messages: [{
+                    content: message,
+                    role: 'user'
+                }],
+                stream: false,
+                uid: this.userid,
+                mind_map_question: "",
+            })
+
+            _this.loading = true
+            _this.ajax.post('https://gpt4.cocorobo.cn/chat', params).then(function (response) {
+                console.log(response);
+                let data = response.data.FunctionResponse
+                if (data.choices && data.choices.length && data.choices[0].message) {
+                    console.log(data.choices[0].message.content);
+                    try {
+                        let _data = JSON.parse(data.choices[0].message.content)
+                        _this.createPpt(_data)
+                    } catch (e) {
+                        console.log('error_________________'+e);
+                        _this.$message.error(data.choices[0].message.content)
+                        _this.loading = false
+                    }
+
+                }
+            }).catch(function (error) {
+                _this.loading = false
+                console.log(error);
+            });
+        },
+        createPpt(array) {
+            // 1. 创建PPT
+            const pres = new Pptxgen()
+            for (var i = 0; i < array.length; i++) {
+                // 2. 创建一个PPT页面，每调用一次 pres.addSlide() 都可以生成一张新的页面
+                // 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面，代码不会很乱
+                const _slide = pres.addSlide()
+
+                // 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”
+                // 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……
+                // 关于坐标长度与px的转换 x 1 = 127~128px 左右
+                const tempResult1 = array[i].title
+                _slide.addText(tempResult1, {
+                    x: 0.5, // 横坐标
+                    y: 0.5,
+                    color: '363636',
+                    fontSize: 24, // 字号
+                    fill: { color: 'F1F1F1' },
+                    align: 'center'
+                })
+                const tempResult2 = array[i].task
+                _slide.addText(tempResult2, {
+                    x: 0.5, // 横坐标
+                    y: 2,
+                    color: '363636',
+                    fontSize: 18, // 字号
+                    fill: { color: 'F1F1F1' },
+                    align: 'center'
+                })
+                const tempResult3 = array[i].points
+                _slide.addText(tempResult3, {
+                    x: 0.5, // 横坐标
+                    y: 4,
+                    color: '363636',
+                    fontSize: 18, // 字号
+                    fill: { color: 'F1F1F1' },
+                    align: 'center'
+                })
+            }
+
+            // 获取PPTX文件的ArrayBuffer
+
+            // 保存为 Blob 并处理
+            pres.write('blob').then((blob) => {
+                // 现在你有了一个 Blob 对象
+                console.log(blob);
+
+                const file = new File([blob], 'aiPpt.pptx', { type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" });
+                console.log(pres)
+                this.beforeUpload(file)
+            });
+
+        },
+        beforeUpload(event) {
+            var file = event;
+            var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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",
+            }; //秘钥形式的登录上传
+            window.AWS.config.update(credentials);
+            window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+            var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+            var _this = this;
+
+            if (file) {
+                var params = {
+                    Key:
+                        file.name.split(".")[0] +
+                        new Date().getTime() +
+                        "." +
+                        file.name.split(".")[file.name.split(".").length - 1],
+                    ContentType: file.type,
+                    Body: file,
+                    "Access-Control-Allow-Credentials": "*",
+                    ACL: "public-read",
+                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+                var options = {
+                    partSize: 2048 * 1024 * 1024,
+                    queueSize: 2,
+                    leavePartsOnError: true,
+                };
+                bucket
+                    .upload(params, options)
+                    .on("httpUploadProgress", function (evt) {
+                        //这里可以写进度条
+                        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+                    })
+                    .send(function (err, data) {
+                        _this.loading = false
+                        if (err) {
+                            _this.$message.error("上传失败");
+                        } else {
+                            _this.url = data.Location
+                            _this.uJson = {
+                              name: file.name,
+                              url: data.Location,
+                              type: 3,
+                            }
+                            console.log(data.Location);
+                        }
+                    });
+            }
+        },
     },
 }
 </script>
-  
+
 <style scoped>
 .dialog_diy>>>.el-dialog {
     height: auto;

src/components/pages/aiAddCourse/aiTips.vue

@@ -163,7 +163,7 @@ export default {
 .binfo_textarea {
     border: 1.5px solid #cad1dc;
     font-size: 15px;
-    resize: none;
+    resize: vertical;
     /* background: #f6f6f6; */
     font-family: "Microsoft YaHei";
 }

src/components/pages/components/wOffice.vue

@@ -0,0 +1,172 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
+    :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url)"></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    url: {
+      type: String,
+      default:
+        "",
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+  mounted() {
+  
+  },
+  beforeDestroy() { },
+  watch: {
+  },
+  methods: {
+   
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span+span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>