wordpress成品网站云部落,旅游网网站建设目的,做推文加入视频的网站,云主机玩游戏怎么样文章目录 前言项目结构导航实现创作中心移动小球消息提示 完整代码 前言
闲的#xff0c;你信嘛#xff0c;还得开发一个基本的门户社区网站#xff0c;来给到Hlang,不然我怕说工作量不够。那么这个的话#xff0c;其实也很好办#xff0c;主要是这个门户网站的UI写起来麻… 文章目录 前言项目结构导航实现创作中心移动小球消息提示 完整代码 前言
闲的你信嘛还得开发一个基本的门户社区网站来给到Hlang,不然我怕说工作量不够。那么这个的话其实也很好办主要是这个门户网站的UI写起来麻烦一点其他的就直接套用组件和以前的老代码就行了。为了快速开发我直接用royi-cloud去做了。反正自己搭建一个也是这样还要自己重新搭建环境不如直接加速。像这种类型的网站没有啥技巧无法是做做防抖节流对接点啥支付等等的玩意。一个礼拜就能开发好前提是前端好写。不过也确实不难这种东西。其他的就是套用组件没啥后端的话原来是整合人人开源一套的但是MP我实在是不喜欢越写越觉得MP有点呆。懒得改写不如直接换架构。这也是为啥直接用ruoyi了。
废话不多说看看效果
我甚至为此用New Bing生成了一个Logo。
首先没错我的临时毕设方案有两个部分 1. 基于Python实现的中文编程解释器。因为主打的是教学锻炼编程思维因此不考虑任何性能只考虑开发成本和周期要是用C怼那我觉得我一开始的算法开发平台也不是不能做完。 2. 给这个玩意做一个技术交流社区这个社区的名字叫做Hlang,但是它不限于Hlang,其实就是个博客社区套壳。然后里面很多功能会直接套用白洞。但是所有内容会重构反正现在开发一个这种玩意顶多一个礼拜包括前端估计两个礼拜顶天了
项目结构
废话不多说先来看到我们的项目结构 在这里导航栏是一个组件。 在App.vue里面直接调用
script setup
import { RouterLink, RouterView } from vue-router
import Header from ./components/Header.vue;
/script
templateheaderHeader/Header/headerdiv classmaindiv classplaceholder/div RouterView //div
/templatestyle scoped.main{width: 100%;background-color: rgb(242,243,245);}.placeholder{height: 80px;width: 100%;}header {position: fixed;top: 0;left: 0;width: 100%;height: 42px;background-color: #fff; /* 设置背景颜色 */padding: 20px; /* 添加内边距 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */z-index: 999; /* 设置堆叠顺序确保 header 位于其他内容之上 */}
/style
这里注意的是为了让head固定我用fixed布局然后的话为了避免挡住内容于是在这里我用了一个div把main里面的东西顶下去。 就是这个 div classplaceholder/div 导航实现
那么接下来就是我们的导航了。 首先是这个导航的基本结构
templateel-menu:default-activeactiveIndexclassel-menu-headermodehorizontalselecthandleSelect!-- span stylewidth: 50px;/span --el-menu-item index1spanimgstylewidth: 50px;height: 50pxsrc../../public/favicon.ico/span/el-menu-itemel-menu-item index2template #title社区/template/el-menu-itemel-menu-item index3template #title说说/template/el-menu-itemdiv classh-searchel-autocompletestyleheight: 50px; width: 350px;margin-top: 12px;v-modelstate1:fetch-suggestionsquerySearchclearableplaceholder探索社区selecthandleSelect/el-button stylemargin-top: 12px;margin-left: 5px; :iconSearch circle //divdiv classh-showdiv classcustom-loader/div/divel-sub-menu index4template #titleel-button typeprimary创作中心/el-button/templatediv classw-centerdiv classw-c-itemimg classw-c-it-img src~/assets/image/write.pngdiv classw-c-it-text写文章/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/shuoshuo.pngdiv classw-c-it-text写说说/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/chaogao.pngdiv classw-c-it-text草稿箱/div/div/div/el-sub-menudiv classmessage-tipel-badge :value100 :max10 classitemimg classmessage-img src~/assets/image/notic.png/el-badge/divdiv classavatar hover-rotateimg classavatar-img srchttps://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg/div/el-menu/template
整体用到是flex布局 然后的话导航最外层用到还是element-plus的导航但是里面的css重新改了一下。 首先是间隔为了避免改动源代码出现问题我直接在menu里面多了一个属性 .el-menu-header{gap: 20px;padding-left: 100px;
}然后在这里设置 也可以实现效果。
创作中心
在这里的话前面几个按钮都是直接使用的组件主要是后面这个东西。借鉴了掘金的这个操作 这部分代码结构是这样的 el-sub-menu index4template #titleel-button typeprimary创作中心/el-button/templatediv classw-centerdiv classw-c-itemimg classw-c-it-img src~/assets/image/write.pngdiv classw-c-it-text写文章/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/shuoshuo.pngdiv classw-c-it-text写说说/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/chaogao.pngdiv classw-c-it-text草稿箱/div/div/div/el-sub-menu直接这样写就可以实现那种自定义的效果。 那么css代码是这样的
.w-c-it-img{margin-top: 10px;width: 40%;height: 40px;
}.w-c-it-text{margin-top: 10px;width: 100%;height: 30px;font-size: 14px;text-align: center;
}
.w-c-item:hover{border-radius: 10px;-webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);-moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}
.w-c-item{cursor: pointer;margin-top: 20px;width: 80px;height: 80px;display: flex;flex-direction: column;justify-items: center;align-items: center;
}
.w-center{border-radius: 30px;height: 120px;display: flex;padding-left: 60px;gap: 20px;width: 350px;
}移动小球
这玩意其实就是这个 这玩意会动。其实就是用来占位置的实在是没有啥功能了。留个空反正也是微服务架构后面上个功能也好办。 div classh-showdiv classcustom-loader/div/div.custom-loader {margin-top: 12px;width: 120px;height: 22px;border-radius: 40px;color: #E4E4ED;position: relative;overflow: hidden;
}.custom-loader::before {content: ;position: absolute;margin: 2px;width: 14px;top: 0;bottom: 0;left: -20px;border-radius: inherit;background: #2898dd;box-shadow: -10px 0 12px 3px #83daf1;clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);animation: ct4 1s infinite linear;
}keyframes ct4 {100% {left: calc(100% 20px)}
}消息提示
这个消息提示和头像是类似的就一起说了。其实原来我一直用错了就是那个消息提示显示的个数原来做的时候忙个数老是和图标有很大间距。因为原来一直套用的是el-button 这个玩意样式不好改于是直接在div上面加。 div classmessage-tipel-badge :value100 :max10 classitemimg classmessage-img src~/assets/image/notic.png/el-badge
/div
.message-img{cursor: pointer;width: 25px;height: 30px;
}.message-img:hover{border-radius: 10px;-webkit-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);-moz-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
}.message-tip{margin-top: 12px;width: 30px;
}完整代码
okey,接下来是完整代码
templateel-menu:default-activeactiveIndexclassel-menu-headermodehorizontalselecthandleSelect!-- span stylewidth: 50px;/span --el-menu-item index1spanimgstylewidth: 50px;height: 50pxsrc../../public/favicon.ico/span/el-menu-itemel-menu-item index2template #title社区/template/el-menu-itemel-menu-item index3template #title说说/template/el-menu-itemdiv classh-searchel-autocompletestyleheight: 50px; width: 350px;margin-top: 12px;v-modelstate1:fetch-suggestionsquerySearchclearableplaceholder探索社区selecthandleSelect/el-button stylemargin-top: 12px;margin-left: 5px; :iconSearch circle //divdiv classh-showdiv classcustom-loader/div/divel-sub-menu index4template #titleel-button typeprimary创作中心/el-button/templatediv classw-centerdiv classw-c-itemimg classw-c-it-img src~/assets/image/write.pngdiv classw-c-it-text写文章/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/shuoshuo.pngdiv classw-c-it-text写说说/div/divdiv classw-c-itemimg classw-c-it-img src~/assets/image/chaogao.pngdiv classw-c-it-text草稿箱/div/div/div/el-sub-menudiv classmessage-tipel-badge :value100 :max10 classitemimg classmessage-img src~/assets/image/notic.png/el-badge/divdiv classavatar hover-rotateimg classavatar-img srchttps://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg/div/el-menu/templatescript langts setup
import { ref,onMounted } from vue
import {Search} from element-plus/icons-vueconst activeIndex ref(1)
const state1 ref()interface RestaurantItem {value: stringlink: string
}
const restaurants refRestaurantItem[]([])const querySearch (queryString: string, cb: any) {const results queryString? restaurants.value.filter(createFilter(queryString)): restaurants.value// call callback function to return suggestionscb(results)
}
const createFilter (queryString: string) {return (restaurant: RestaurantItem) {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) 0)}
}
const loadAll () {return [{ value: vue, link: https://github.com/vuejs/vue },{ value: element, link: https://github.com/ElemeFE/element },{ value: cooking, link: https://github.com/ElemeFE/cooking },{ value: mint-ui, link: https://github.com/ElemeFE/mint-ui },{ value: vuex, link: https://github.com/vuejs/vuex },{ value: vue-router, link: https://github.com/vuejs/vue-router },{ value: babel, link: https://github.com/babel/babel },]
}const handleSelect (item: RestaurantItem) {console.log(item)
}onMounted(() {restaurants.value loadAll()
})
/scriptstyle scoped.avatar{cursor: pointer;margin-left: 60px;width: 40px;height: 40px;border-radius: 100px;
}.hover-rotate {transition: transform 0.5s ease-in-out;
}.hover-rotate:hover {transform: rotate(360deg);
}.avatar-img{border-radius: 100px;margin-top: 10px;width: 100%;height: 100%;
}
.message-img{cursor: pointer;width: 25px;height: 30px;
}.message-img:hover{border-radius: 10px;-webkit-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);-moz-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
}.message-tip{margin-top: 12px;width: 30px;
}
.w-c-it-img{margin-top: 10px;width: 40%;height: 40px;
}.w-c-it-text{margin-top: 10px;width: 100%;height: 30px;font-size: 14px;text-align: center;
}
.w-c-item:hover{border-radius: 10px;-webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);-moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}
.w-c-item{cursor: pointer;margin-top: 20px;width: 80px;height: 80px;display: flex;flex-direction: column;justify-items: center;align-items: center;
}
.w-center{border-radius: 30px;height: 120px;display: flex;padding-left: 60px;gap: 20px;width: 350px;
}
.custom-loader {margin-top: 12px;width: 120px;height: 22px;border-radius: 40px;color: #E4E4ED;position: relative;overflow: hidden;
}.custom-loader::before {content: ;position: absolute;margin: 2px;width: 14px;top: 0;bottom: 0;left: -20px;border-radius: inherit;background: #2898dd;box-shadow: -10px 0 12px 3px #83daf1;clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);animation: ct4 1s infinite linear;
}keyframes ct4 {100% {left: calc(100% 20px)}
}
.h-search{display: flex;}
.el-menu-header{gap: 20px;padding-left: 100px;
}
/style
后面多写写特效啥的锻炼锻炼美感可惜的就是先前写的前端主页用不了了。可恶没办法风格不合适。
真的有一说一CSDN的页面设计实在是有点那啥先前whitehole的页面设计就是照着csdn来的写道后面发现不行改成掘金的一些风格结果有些地方不伦不类写到后面有点像知乎页面。这次的话就直接照着掘金借鉴了狗头
