feat: 背景图, 底部

ramwin · Mar 12, 2023 · f49517c · f49517c
1 parent 65b885c
commit f49517c
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 37 deletions.
diff --git a/mytheme/example.md b/mytheme/example.md
@@ -2,34 +2,22 @@
 theme: ./
 ---
 
-# Slidev Theme Starter
+# 转正答辩
 
-Presentation slides for developers
-
-<div class="pt-12">
-  <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
-    Press Space for next page <carbon:arrow-right class="inline"/>
-  </span>
-</div>
+* 姓名: 王祥
+* 部门: 很长很长的名字
+* 姓名: 王祥
+* 姓名: 王祥
 
 ---
 
-# What is Slidev?
-
-Slidev is a slides maker and presenter designed for developers, consist of the following features
+# 导航
 
-- 📝 **Text-based** - focus on the content with Markdown, and then style them later
-- 🎨 **Themable** - theme can be shared and used with npm packages
-- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
-- 🤹 **Interactive** - embedding Vue components to enhance your expressions
-- 🎥 **Recording** - built-in recording and camera view
-- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
-- 🛠 **Hackable** - anything possible on a webpage
+## 个人简介
 
-<br>
-<br>
+## 工作内容
 
-Read more about [Why Slidev?](https://sli.dev/guide/why)
+## 总结反思
 
 
 ---

diff --git a/mytheme/global-bottom.vue b/mytheme/global-bottom.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="footer">
+    <div>王牌科技公司</div>
+    <div>版权所有</div>
+    <img src="/logo.png" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
diff --git a/mytheme/layouts/cover.vue b/mytheme/layouts/cover.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slidev-layout cover">
-    <div class="my-auto w-full">
+    <div class="w-full">
       <slot />
     </div>
   </div>

diff --git a/mytheme/public/logo.png b/mytheme/public/logo.png
diff --git a/mytheme/public/一半背景图.png b/mytheme/public/一半背景图.png
diff --git a/mytheme/public/封面背景.jpg b/mytheme/public/封面背景.jpg
diff --git a/mytheme/styles/base.css b/mytheme/styles/base.css
@@ -0,0 +1,10 @@
+.footer {
+  padding: 0px 10px;
+  position: absolute;
+  background: grey;
+  align-items: center;
+  width: 100%;
+  bottom: 0px;
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/mytheme/styles/base.less b/mytheme/styles/base.less
@@ -0,0 +1,10 @@
+.footer {
+  padding: 0px 10px;
+  position: absolute;
+  background: grey;
+  align-items: center;
+  width: 100%;
+  bottom: 0px;
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/mytheme/styles/index.ts b/mytheme/styles/index.ts
@@ -2,3 +2,4 @@
 import '@slidev/client/styles/layouts-base.css'
 import './layout.css'
 import './code.css'
+import './base.css'
diff --git a/mytheme/styles/layout.css b/mytheme/styles/layout.css
@@ -1,22 +1,51 @@
 :root {
-  // default theme color
-  // can be overrided by uses `themeConfig` option
   --slidev-theme-primary: #5d8392;
 }
-
 .slidev-layout.cover,
 .slidev-layout.intro {
   @apply h-full grid;
-
-  h1 {
-    @apply text-6xl leading-20;
-  }
-
-  h1 + p {
-    @apply -mt-2 opacity-50 mb-4;
-  }
-
-  p + h2, ul + h2, table + h2 {
-    @apply mt-10;
-  }
+}
+.slidev-layout.cover h1,
+.slidev-layout.intro h1 {
+  @apply text-6xl leading-20;
+}
+.slidev-layout.cover h1 + p,
+.slidev-layout.intro h1 + p {
+  @apply -mt-2 opacity-50 mb-4;
+}
+.slidev-layout.cover p + h2,
+.slidev-layout.intro p + h2,
+.slidev-layout.cover ul + h2,
+.slidev-layout.intro ul + h2,
+.slidev-layout.cover table + h2,
+.slidev-layout.intro table + h2 {
+  @apply mt-10;
+}
+.slidev-layout.cover {
+  background: url("/一半背景图.png");
+  background-position: 0px 0px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.slidev-layout.cover .w-full {
+  width: 80%;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 5%;
+}
+.slidev-layout.cover h1 {
+  color: black;
+}
+.slidev-layout.cover ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.slidev-layout.cover ul li {
+  box-sizing: border-box;
+  width: 50%;
+  margin-left: 0px;
 }
diff --git a/mytheme/styles/layout.less b/mytheme/styles/layout.less
@@ -0,0 +1,52 @@
+
+:root {
+  // default theme color
+  // can be overrided by uses `themeConfig` option
+  --slidev-theme-primary: #5d8392;
+}
+
+.slidev-layout.cover,
+.slidev-layout.intro {
+  @apply h-full grid;
+
+  h1 {
+    @apply text-6xl leading-20;
+  }
+
+  h1 + p {
+    @apply -mt-2 opacity-50 mb-4;
+  }
+
+  p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+  }
+}
+
+.slidev-layout.cover {
+  .w-full {
+    width: 80%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 5%;
+  }
+  h1 {
+    color: black;
+  }
+  background: url("/一半背景图.png");
+  background-position: 0px 0px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    li {
+      box-sizing: border-box;
+      width: 50%;
+      margin-left: 0px;
+    }
+  }
+}