做外贸一般在什么网站,南阳住房和城乡建设厅网站,wordpress首页只能是page,怎么做网站界面分析一、创建vue项目
创建vue项目#xff1a;先进入要操作的目录下#xff0c;注意本项目是用vue2开发的。
vue create vue项目名
二、项目开发
1.创建项目结构 2.开发功能模块
主入口App.vue
templatediv classboss-appHeader /m…一、创建vue项目
创建vue项目先进入要操作的目录下注意本项目是用vue2开发的。
vue create vue项目名
二、项目开发
1.创建项目结构 2.开发功能模块
主入口App.vue
templatediv classboss-appHeader /main classcontainersection classsearch-sectiondiv classsearch-boxinput typetext placeholder搜索职位/公司/地点button classsearch-btn搜索/button/div/sectionJobCategory /div classcontent-wrapJobList /CompanyList //div/main/div
/templatescript setup
import Header from ./components/Header.vue
import JobCategory from ./components/JobCategory.vue
import JobList from ./components/JobList.vue
import CompanyList from ./components/CompanyList.vue
/scriptstyle scoped
.boss-app {font-family: PingFang SC, Microsoft YaHei, sans-serif;
}
.container {max-width: 1200px;margin: 0 auto;padding: 0 15px;
}
.search-section {padding: 30px 0;text-align: center;
}
.search-box {display: flex;max-width: 800px;margin: 0 auto;
}
.search-box input {flex: 1;height: 48px;padding: 0 15px;border: 1px solid #00b4a6;border-radius: 4px 0 0 4px;font-size: 16px;
}
.search-btn {width: 120px;background: #00b4a6;color: white;border: none;border-radius: 0 4px 4px 0;font-size: 16px;cursor: pointer;
}
.content-wrap {display: flex;margin-top: 30px;gap: 20px;
}
/style
顶部导航Header.vue
templateheader classboss-headerdiv classcontainerdiv classheader-contentdiv classlogoimg src../assets/logo.png altBOSS直聘 width120/divnav classmain-nava href# classactive首页/aa href#职位/aa href#公司/aa href#APP/aa href#消息/a/navdiv classuser-actionsa href#登录/aa href# classregister注册/a/div/div/div/header
/templatestyle scoped
.boss-header {height: 60px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-content {display: flex;align-items: center;height: 60px;
}
.logo {margin-right: 40px;
}
.main-nav {display: flex;gap: 30px;
}
.main-nav a {color: #333;text-decoration: none;font-size: 16px;
}
.main-nav a.active {color: #00b4a6;font-weight: bold;
}
.user-actions {margin-left: auto;display: flex;gap: 15px;
}
.register {color: #00b4a6;font-weight: bold;
}
/style
职位分类JobCategory.vue
templatesection classjob-categoryh2 classsection-title热门职位/h2div classcategory-listdiv v-forcategory in categories :keycategory.id classcategory-itemh3{{ category.name }}/h3div classtagsspan v-fortag in category.tags :keytag{{ tag }}/span/div/div/div/section
/templatescript setup
const categories [{id: 1,name: 技术,tags: [Java, Python, 前端, 算法, 测试, 架构师]},{id: 2,name: 产品,tags: [产品经理, 产品总监, 数据产品, 硬件产品]},{id: 3,name: 设计,tags: [UI设计, 交互设计, 平面设计, 3D设计]}
]
/scriptstyle scoped
.job-category {margin-top: 20px;
}
.section-title {font-size: 20px;color: #333;margin-bottom: 15px;
}
.category-list {display: flex;gap: 30px;
}
.category-item {flex: 1;background: #f8f8f8;padding: 15px;border-radius: 4px;
}
.category-item h3 {font-size: 16px;margin-bottom: 10px;color: #333;
}
.tags {display: flex;flex-wrap: wrap;gap: 8px;
}
.tags span {background: white;padding: 4px 10px;border-radius: 12px;font-size: 14px;color: #666;cursor: pointer;
}
.tags span:hover {color: #00b4a6;
}
/style 职位列表JobList
templatesection classjob-listdiv classlist-headerh2推荐职位/h2a href#查看更多 /a/divul classjobsli v-forjob in jobs :keyjob.id classjob-itemdiv classjob-mainh3{{ job.title }}/h3p classsalary{{ job.salary }}/pp classcompany{{ job.company }}/pdiv classtagsspan v-fortag in job.tags :keytag{{ tag }}/span/div/divdiv classjob-extrap classlocation{{ job.location }}/pp classtime{{ job.time }}/p/div/li/ul/section
/templatescript setup
const jobs [{id: 1,title: 高级前端开发工程师,salary: 25k-50k,company: 字节跳动,tags: [Vue, React, TypeScript],location: 北京·海淀区,time: 3分钟前},{id: 2,title: Java架构师,salary: 40k-70k,company: 阿里巴巴,tags: [Spring Cloud, 分布式, 高并发],location: 杭州·余杭区,time: 1小时前}
]
/scriptstyle scoped
.job-list {flex: 2;
}
.list-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;
}
.list-header h2 {font-size: 18px;color: #333;
}
.jobs {list-style: none;padding: 0;margin: 0;
}
.job-item {padding: 20px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 15px;display: flex;justify-content: space-between;
}
.job-item:hover {box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.job-main h3 {font-size: 16px;margin: 0 0 8px 0;color: #333;
}
.salary {color: #ff6b00;font-weight: bold;margin: 0 0 8px 0;
}
.company {color: #666;margin: 0 0 10px 0;
}
.tags {display: flex;gap: 8px;
}
.tags span {background: #f0f7f6;color: #00b4a6;padding: 2px 8px;border-radius: 2px;font-size: 12px;
}
.job-extra {text-align: right;
}
.location, .time {color: #999;margin: 0;font-size: 12px;
}
/style
公司列表CompanyList
templatesection classcompany-listdiv classlist-headerh2热门公司/h2a href#查看更多 /a/divul classcompaniesli v-forcompany in companies :keycompany.id classcompany-itemdiv classcompany-logoimg :srccompany.logo :altcompany.name/divdiv classcompany-infoh3{{ company.name }}/h3p classindustry{{ company.industry }}/pp classscale{{ company.scale }}/pdiv classjobsspan v-forjob in company.hotJobs :keyjob{{ job }}/span/div/div/li/ul/section
/templatescript setup
const companies [{id: 1,name: 腾讯科技,logo: https://via.placeholder.com/60,industry: 互联网,scale: 10000人以上,hotJobs: [前端开发, 产品经理, 数据分析]},{id: 2,name: 字节跳动,logo: https://via.placeholder.com/60,industry: 互联网,scale: 10000人以上,hotJobs: [算法工程师, 运营总监, 测试开发]}
]
/scriptstyle scoped
.company-list {flex: 1;
}
.companies {list-style: none;padding: 0;margin: 0;
}
.company-item {padding: 15px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 15px;display: flex;gap: 15px;
}
.company-item:hover {box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.company-logo img {width: 60px;height: 60px;border-radius: 4px;object-fit: cover;
}
.company-info h3 {font-size: 16px;margin: 0 0 5px 0;color: #333;
}
.industry, .scale {color: #666;margin: 0 0 5px 0;font-size: 13px;
}
.jobs {display: flex;flex-wrap: wrap;gap: 5px;margin-top: 8px;
}
.jobs span {background: #f0f7f6;color: #00b4a6;padding: 2px 8px;border-radius: 2px;font-size: 12px;
}
/style
三、运行项目 在终端输入
npm install
npm run serve 本项目只是实现一个简单的静态网页,后续再完善一下功能。
