| | |
| | | <el-input v-model="videoData.id"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="url" label="视频" min-width="8"> |
| | | <video controls v-if="videoList" :src="videoData.url" width="300px" height="200px" /> |
| | | <el-upload |
| | | v-if="isUpdate" |
| | | class="avatar-uploader" |
| | | action="" |
| | | ref="image" |
| | | :show-file-list="false" |
| | | :auto-upload="true" |
| | | :http-request="videoUpload"> |
| | | <video controls v-if="videoData.url" :src="videoData.url" width="300px" height="200px" /> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | <i class="el-icon-plus avatar-uploader-icon"></i> |
| | | </el-upload> |
| | | </el-form-item> |
| | | <el-button v-if="!isDisabled" class="submit-button" type="primary" @click.native.prevent="onSubmit">提交</el-button> |
| | |
| | | url: [{ required: true, validator: validateVideoUrl }], |
| | | type: [{ required: true, trigger: ['blur', 'change'], message: '请选择类型' }] |
| | | }, |
| | | isDisabled: false |
| | | isDisabled: false, |
| | | videoList: [] |
| | | } |
| | | }, |
| | | |
| | | created() { |
| | | this.videoData = deepClone(this.dialogData); |
| | | this.videoData.url = this.videoData.url ? this.videoData.url.split(',')[0] : ''; |
| | | if (this.videoData.url) { |
| | | this.videoList = this.videoData.url.split(','); |
| | | } |
| | | this.isDisabled = !this.isUpdate; |
| | | }, |
| | | methods: { |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .avatar-uploader .el-upload { |
| | | border: 1px solid #ffffff; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | .avatar-uploader .el-upload:hover { |
| | | border-color: #409EFF; |
| | | } |
| | | .avatar-uploader-icon { |
| | | font-size: 14px; |
| | | color: #8c939d; |
| | | width: 50px; |
| | | height: 50px; |
| | | line-height: 50px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .submit-button { |
| | | margin-left: 200px; |
| | |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .card { |
| | | position: absolute; |
| | | z-index: 2000; |
| | | right: 0; |
| | | |
| | | .box-card { |
| | | min-height: 240px; |
| | | max-height: 260px; |
| | | overflow: hidden; |
| | | background-color: #09152f; |
| | | position: relative; |
| | | max-width: 220px; |
| | | |
| | | .scrollWrap { |
| | | overflow: scroll; |
| | | height: 180px; |
| | | position: relative; |
| | | color: #4b9bb7; |
| | | |
| | | .el-checkbox-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .el-checkbox { |
| | | line-height: 20px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .myclear { |
| | | width: 100%; |
| | | line-height: 20px; |
| | | color: #4b9bb7; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .hidebar { |
| | | position: absolute; |
| | | top: 77px; |
| | | right: 20px; |
| | | width: 20px; |
| | | height: 180px; |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | .item { |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .leader { |