11

src/pages/teacher/contribution/addimageText.vue

+<style>
+    .addimageText {
+        width: 100%;
+        height: 100%;
+        margin: 15px;
+        display: flex;
+    }
+
+    .box_l {
+        width: 400px;
+
+    }
+
+    .box_l_center {
+        width: 370px;
+        margin-left: 15px;
+        border-radius: 5px;
+    }
+
+    .box_r {
+        flex: 1;
+        width: 1px;
+        background: #FFF;
+        border-radius: 9px;
+        padding: 15px;
+        margin-right: 30px;
+    }
+
+    .appmsg_account {
+        background-color: #fff;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        border-radius: 5px 5px 0 0;
+    }
+
+    .appmsg_one {
+        width: 100%;
+        height: 143px;
+        position: relative;
+        background: #999;
+        color: #FFF;
+    }
+
+    .appmsg_two {
+        width: 100%;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 15px;
+    }
+</style>
 <template>
-    <div class="page-body">
-       124  
+    <div class="addimageText">
+        <div class="box_l">
+            <div class="box_l_center">
+                <div class="appmsg_account">
+                    <img style="width: 24px;height: 24px;border-radius: 50%;margin-right: 10px;"
+                        src="http://wx.qlogo.cn/mmopen/B2EfAOZfS1hP0WNR9tGwEFJibrib3NcWYd4VXF10YAia2Fy6OmkzicpibHmabNRic4Yqj9wtImErdG3picwY3ia3AjVoZaBZAFQTnBJl/64"
+                        alt="">
+                    赞羊生活
+                </div>
+                <div class="appmsg" v-for="(x,y) in list" :key='y' :style="{border:x.Id==select?'2px solid #07c160':''}"
+                    @click="select=x.Id">
+                    <div class="appmsg_one" v-if="y==0">
+                        <span>{{x.Name!=''?x.Name:'标题'}}</span>
+                    </div>
+                    <div class="appmsg_two" v-if="y!=0">
+                        <span>{{x.Name!=''?x.Name:'标题'}}</span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="box_r">
+            <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
+                <q-btn-group push>
+                    <q-btn-dropdown push label="图片">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onItemClick">
+                                本地上传
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onItemClick">
+                                从图片库选择
+                            </q-item>
+                        </q-list>
+                    </q-btn-dropdown>
+                    <q-btn push label="视频" />
+                    <q-btn push label="音频" />
+                    <q-btn push label="超链接" />
+                    <q-btn push label="小程序" />
+                </q-btn-group>
+            </div>
+            <q-input clearable standout="bg-primary text-white" v-model="Name" label="标题" maxlength="64" />
+            <q-input clearable standout="bg-primary text-white" v-model="author" label="作者" maxlength="8"
+                style="margin-top: 20px;" />
+            <contributionUE :config="config" ref="UE_Title"></contributionUE>
+            <!-- <template id="app-rich-text">
+                <div class="app-rich-text">
+                    <textarea style="width: 100%" :id="id"></textarea>
+                </div>
+            </template> -->
+        </div>
+
+
     </div>
 </template>
 
 <script>
+    import contributionUE from './ue/contributionUE'
 
     export default {
         meta: {
             title: "新增/修改图文"
         },
+        components: {
+            contributionUE,
+        },
 
         data() {
             return {
+                select: 1,
+                list: [{ Id: 1, Name: '' }, { Id: 2, Name: '23' }],
+                Name: '',
+                author: '',
+                config: {
+                    initialFrameWidth: null,
+                    initialFrameHeight: 300,
 
+                },
+                attachmentDialogVisible: false, //上传附件弹窗
+                id: 'app-rich-text-' + (Math.floor((Math.random() * 10000) + 1)),
+                ue: null,
+                tempContent: this.value,
+                isInputChange: false,
+                uploadType: "1", //1-上传图片，2-上传附件,3-上传音频
+                //默认图片域名
+                defaultImgDomain: "https://imgfile.oytour.com/static/",
+                ViewDomain: "",
             }
         },
 
@@ -21,11 +145,10 @@
 
         },
         methods: {
+            onItemClick() {
 
             }
         }
+    }
 
 </script>
\ No newline at end of file
-<style lang="sass">
-    @import url('~assets/css/table.sass')
-</style>
\ No newline at end of file