| 
				
				
					
				
				
				 | 
			
			 | 
			@@ -14,7 +14,7 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <!-- 作品列表 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div class="workList flex"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div v-if="videoList.length > 0" class="workList flex"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="workItem" v-for="item in videoList" :key="item.id"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="workImg"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <img | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -67,6 +67,14 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div v-if="videoList.length == 0" class="noList"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="title"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        {{ $t("myCreating.noList") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="goCreate" @click="goCreate"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        {{ $t("myCreating.goCreate") }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <!-- 预览作品 --> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <el-dialog | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      destroy-on-close | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -110,6 +118,21 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </span> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </template> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </el-dialog> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div class="pagination"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <el-pagination | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        v-model:current-page="pageNum" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        v-model:page-size="pageSize" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        :page-sizes="[10, 20, 50, 100, 200]" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        :small="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        :disabled="false" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        :background="true" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        layout="total, sizes, prev, pager, next, jumper" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        :total="total" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        @size-change="handleSizeChange" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        @current-change="handleCurrentChange" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			</template> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<script setup> | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -117,20 +140,34 @@ import { userPhotoVideoList, delUserPhotoVideoByID } from "@/apis/myCreating"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { timestampToTime } from "@/utils/tools"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { useI18n } from "vue-i18n"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { getStatus } from "./videoStatus"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { useRouter } from "vue-router"; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const router = useRouter(); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 当前语言状态与国际化组件 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const { locale } = useI18n(); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const lanChange = ref(locale); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let title = ref(""); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let pageSize = ref(100); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let pageNum = ref(1); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const title = ref(""); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const pageNum = ref(1); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const pageSize = ref(10); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const total = ref(0); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 弹窗显示隐藏 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let showDialog = ref(false); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const showDialog = ref(false); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 当前作品 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			let presentItem = ref(""); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const presentItem = ref(""); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 作品列表 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const videoList = ref([]); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const handleSizeChange = (val) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  pageSize.value = val; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageNum.value, pageSize.value, title.value); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			const handleCurrentChange = (val) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  pageNum.value = val; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageNum.value, pageSize.value, title.value); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			// 点击作品 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function clickVideoItem(item) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  showDialog.value = true; | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -150,8 +187,12 @@ function mouseenter(item) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function handleDownload() {} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function goCreate() { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  router.push("/createVideo"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function searchVideoList() { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageSize.value, pageNum.value, title.value, true); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageNum.value, pageSize.value, title.value, true); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function handelDelete(id, title) { | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -174,8 +215,8 @@ function handelDelete(id, title) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			 * @description:获取我的视频作品 | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			 * @return: data | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  userPhotoVideoList(pageSize, pageNum, title) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  userPhotoVideoList(pageNum, pageSize, title) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .then((res) => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      console.log(res, "res"); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      res.data.list.forEach((item) => { | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -185,6 +226,7 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        item.statusName = getStatus(item.videoStatus); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      }); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      videoList.value = res.data.list; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      total.value = res.data.total * 1; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      if (searchFlag) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        const total = res.data.total; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        const msg1 = | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -195,7 +237,13 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          lanChange.value == "zh-cn" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            ? `查询成功!没有符合条件的视频` | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            : `Found! No match videos`; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        ElMessage.success(total > 0 ? msg1 : msg2); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        const msg3 = | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          lanChange.value == "zh-cn" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            ? `查询成功!已加载全部视频` | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            : `Found! Present all videos`; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        return title | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          ? ElMessage.success(total > 0 ? msg1 : msg2) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          : ElMessage.success(msg3); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .catch((err) => { | 
		
		
	
	
		
			
				| 
				
				
				
					
				
				 | 
			
			 | 
			@@ -219,204 +267,257 @@ function delPhotoVideo(videoID) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			onMounted(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageSize.value, pageNum.value, title.value); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  getPhotoVideoList(pageNum.value, pageSize.value, title.value); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			}); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			</script> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			<style lang="scss" scoped> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.page { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  // height: calc(100vh - 84px); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 887px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  padding: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 1200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  padding: 50px 130px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  background-color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-radius: 25px 0 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			:deep(.el-input__wrapper) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border: none; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-bottom: 2px solid #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-radius: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  box-shadow: none; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.el-icon.icon-edit { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  width: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  font-size: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  color: #8c939d; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    color: #292929; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .top { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    margin-bottom: 35px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.workList { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  flex-wrap: wrap; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  justify-content: flex-start; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  margin-top: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .workItem { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    width: 300px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .workList { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    flex-wrap: wrap; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    justify-content: flex-start; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    height: 200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    margin: 0 10px 10px 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    border: 2px solid #c2c2c2; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    border-radius: 5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    margin-top: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    overflow: hidden; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .workImg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .workItem { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 300px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      margin: 0 20px 30px 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      border: 2px solid #c2c2c2; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      border-radius: 5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      padding: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .coverImg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        max-width: 90%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        max-height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      overflow: hidden; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .workImg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .takePlace { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 40%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 80%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .more { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      top: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      left: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      display: none; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background-color: rgb(0 0 0 / 30%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .icon-videoPlay { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        left: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        font-size: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transform: translate(-50%, -50%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .showBtn { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        right: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        font-size: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        line-height: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border-radius: 2px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background-color: #00000056; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        padding: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .coverImg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          max-width: 90%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          max-height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .takePlace { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          top: 40%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          width: 80%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .btns { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .more { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 45px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        right: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        // width: 70px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        // height: 60px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        overflow: hidden; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border-radius: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        left: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 100%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 170px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background-color: rgb(0 0 0 / 30%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        opacity: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transition: all 0.2s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .icon-videoPlay { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          top: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          left: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          width: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          height: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          font-size: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          transform: translate(-50%, -50%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &-item { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          // width: 70px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          // height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .showBtn { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          top: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          right: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          width: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          font-size: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          line-height: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background-color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          padding: 0 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          &-icon { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            display: inline-block; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            width: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          border-radius: 2px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            background-color: #00000056; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .btns { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          top: 45px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          right: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          // width: 70px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          // height: 60px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          overflow: hidden; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          border-radius: 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          &-item { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            // width: 70px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            // height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            background-color: #fff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            padding: 0 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            .icon-delete { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              top: 4px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              left: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            &-icon { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              position: relative; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              display: inline-block; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              width: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              font-size: 16px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              color: #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              .icon-delete { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                top: 4px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                left: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                width: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                font-size: 16px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                color: #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          .text { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            display: inline-block; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            padding-left: 5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            margin-top: -5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            line-height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            background-color: #0000001a; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            .text { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              display: inline-block; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              padding-left: 5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              margin-top: -5px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              line-height: 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              background-color: #0000001a; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .workInfo { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      justify-content: space-between; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      padding: 0 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      line-height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      border-top: 1px solid #afafaf; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .statusName { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      top: 10%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      left: -10%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 120px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      font-size: 14px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      transform: rotate(-45deg); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &.draft { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        /* 草稿 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .workInfo { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        justify-content: space-between; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        padding: 0 10px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        line-height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        border-top: 1px solid #afafaf; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &.generating { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        /* 生成中 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background: linear-gradient(270deg, #4b61dc, #15d1b8); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      .statusName { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        top: 10%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        left: -10%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        width: 120px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        font-size: 14px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transform: rotate(-45deg); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.draft { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          /* 草稿 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.generating { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          /* 生成中 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background: linear-gradient(270deg, #4b61dc, #15d1b8); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.generationFailed { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          /* 生成失败 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.generationSucceed { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          /* 生成成功 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &.generationFailed { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        /* 生成失败 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        .more { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          opacity: 1; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &.generationSucceed { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        /* 生成成功 */ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .noList { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .title { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      font-size: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      margin-top: 100px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background-image: -webkit-linear-gradient( | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        left, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        #4b61dc, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        #15d1b8 25%, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        #4b61dc 50%, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        #15d1b8 75%, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        #4b61dc | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      ) !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      -webkit-text-fill-color: transparent !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      -webkit-background-clip: text !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background-clip: text !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      -webkit-background-size: 200% 100% !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background-size: 200% 100% !important; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    .goCreate { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      width: 200px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      height: 40px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      line-height: 40px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      border-radius: 6px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background: linear-gradient(270deg, #4b61dc, #15d1b8); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      margin: 30px auto; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        transform: scale(1.1); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .pagination { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    position: fixed; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    bottom: 50px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    left: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    transform: translateX(-50%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    background-color: #ffffff; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    padding: 10px 20px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    border-radius: 8px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      background-color: #b8b8b873; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			:deep(.el-input__wrapper) { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border: none; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-bottom: 2px solid #000; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  border-radius: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  box-shadow: none; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  .workItem:hover .more { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    display: block; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			.el-icon.icon-edit { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  width: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  height: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  font-size: 30px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  color: #8c939d; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  cursor: pointer; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  transition: all 0.3s; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  &:hover { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    color: #292929; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
	
		
			
				| 
				
					
				
				
				
				 | 
			
			 | 
			
  |