From 3b79eff2f1181eb6df58ac6f7c7e173f2677cf08 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期二, 18 五月 2021 11:38:15 +0800 Subject: [PATCH] fix maven install 异常 --- ruoyi-ui/src/components/PanThumb/index.vue | 284 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 142 insertions(+), 142 deletions(-) diff --git a/ruoyi-ui/src/components/PanThumb/index.vue b/ruoyi-ui/src/components/PanThumb/index.vue index 796b01b..1bcf417 100644 --- a/ruoyi-ui/src/components/PanThumb/index.vue +++ b/ruoyi-ui/src/components/PanThumb/index.vue @@ -1,142 +1,142 @@ -<template> - <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> - <div class="pan-info"> - <div class="pan-info-roles-container"> - <slot /> - </div> - </div> - <!-- eslint-disable-next-line --> - <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div> - </div> -</template> - -<script> -export default { - name: 'PanThumb', - props: { - image: { - type: String, - required: true - }, - zIndex: { - type: Number, - default: 1 - }, - width: { - type: String, - default: '150px' - }, - height: { - type: String, - default: '150px' - } - } -} -</script> - -<style scoped> -.pan-item { - width: 200px; - height: 200px; - border-radius: 50%; - display: inline-block; - position: relative; - cursor: default; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -} - -.pan-info-roles-container { - padding: 20px; - text-align: center; -} - -.pan-thumb { - width: 100%; - height: 100%; - background-position: center center; - background-size: cover; - border-radius: 50%; - overflow: hidden; - position: absolute; - transform-origin: 95% 40%; - transition: all 0.3s ease-in-out; -} - -/* .pan-thumb:after { - content: ''; - width: 8px; - height: 8px; - position: absolute; - border-radius: 50%; - top: 40%; - left: 95%; - margin: -4px 0 0 -4px; - background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); - box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); -} */ - -.pan-info { - position: absolute; - width: inherit; - height: inherit; - border-radius: 50%; - overflow: hidden; - box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); -} - -.pan-info h3 { - color: #fff; - text-transform: uppercase; - position: relative; - letter-spacing: 2px; - font-size: 18px; - margin: 0 60px; - padding: 22px 0 0 0; - height: 85px; - font-family: 'Open Sans', Arial, sans-serif; - text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); -} - -.pan-info p { - color: #fff; - padding: 10px 5px; - font-style: italic; - margin: 0 30px; - font-size: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.5); -} - -.pan-info p a { - display: block; - color: #333; - width: 80px; - height: 80px; - background: rgba(255, 255, 255, 0.3); - border-radius: 50%; - color: #fff; - font-style: normal; - font-weight: 700; - text-transform: uppercase; - font-size: 9px; - letter-spacing: 1px; - padding-top: 24px; - margin: 7px auto 0; - font-family: 'Open Sans', Arial, sans-serif; - opacity: 0; - transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; - transform: translateX(60px) rotate(90deg); -} - -.pan-info p a:hover { - background: rgba(255, 255, 255, 0.5); -} - -.pan-item:hover .pan-thumb { - transform: rotate(-110deg); -} - -.pan-item:hover .pan-info p a { - opacity: 1; - transform: translateX(0px) rotate(0deg); -} -</style> +<template> + <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> + <div class="pan-info"> + <div class="pan-info-roles-container"> + <slot /> + </div> + </div> + <!-- eslint-disable-next-line --> + <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div> + </div> +</template> + +<script> +export default { + name: 'PanThumb', + props: { + image: { + type: String, + required: true + }, + zIndex: { + type: Number, + default: 1 + }, + width: { + type: String, + default: '150px' + }, + height: { + type: String, + default: '150px' + } + } +} +</script> + +<style scoped> +.pan-item { + width: 200px; + height: 200px; + border-radius: 50%; + display: inline-block; + position: relative; + cursor: default; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.pan-info-roles-container { + padding: 20px; + text-align: center; +} + +.pan-thumb { + width: 100%; + height: 100%; + background-position: center center; + background-size: cover; + border-radius: 50%; + overflow: hidden; + position: absolute; + transform-origin: 95% 40%; + transition: all 0.3s ease-in-out; +} + +/* .pan-thumb:after { + content: ''; + width: 8px; + height: 8px; + position: absolute; + border-radius: 50%; + top: 40%; + left: 95%; + margin: -4px 0 0 -4px; + background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); + box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); +} */ + +.pan-info { + position: absolute; + width: inherit; + height: inherit; + border-radius: 50%; + overflow: hidden; + box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); +} + +.pan-info h3 { + color: #fff; + text-transform: uppercase; + position: relative; + letter-spacing: 2px; + font-size: 18px; + margin: 0 60px; + padding: 22px 0 0 0; + height: 85px; + font-family: 'Open Sans', Arial, sans-serif; + text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.pan-info p { + color: #fff; + padding: 10px 5px; + font-style: italic; + margin: 0 30px; + font-size: 12px; + border-top: 1px solid rgba(255, 255, 255, 0.5); +} + +.pan-info p a { + display: block; + color: #333; + width: 80px; + height: 80px; + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + color: #fff; + font-style: normal; + font-weight: 700; + text-transform: uppercase; + font-size: 9px; + letter-spacing: 1px; + padding-top: 24px; + margin: 7px auto 0; + font-family: 'Open Sans', Arial, sans-serif; + opacity: 0; + transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; + transform: translateX(60px) rotate(90deg); +} + +.pan-info p a:hover { + background: rgba(255, 255, 255, 0.5); +} + +.pan-item:hover .pan-thumb { + transform: rotate(-110deg); +} + +.pan-item:hover .pan-info p a { + opacity: 1; + transform: translateX(0px) rotate(0deg); +} +</style> -- Gitblit v1.9.3